Bug Tracker

Ticket #3502 (closed bug: duplicate)

Opened 6 years ago

Last modified 5 years ago

Opacity set for 1 causes problems in IE

Reported by: jeffkretz Owned by:
Priority: major Milestone: 1.4
Component: core Version: 1.4a1
Keywords: msie opacity Cc: jeffkretz, flesler
Blocking: Blocked by:

Description

In MSIE, when setting opacity to 1, the filter css property is set for alpha(opacity=100), rathern than blanking out the filter property.

This causes problems due a bug in the way IE handles opacity. If a parent element is set alpha/100 and a child element is set for alpha/50, then the child element's partial transparency will "punch through" the parent and the elements behind it can be seen.

This was noticable for me with the ui.draggable function, which sets the opacity to 1 when the element is dragged, causing any child transparent elements to render weirdly.

The solution is to blank out the filter property when the opacity value is set for 1.

Attached is a recommended patch file for this.

JK

Attachments

core.patch Download (1.3 KB) - added by jeffkretz 6 years ago.

Change History

comment:1 Changed 6 years ago by flesler

  • Cc jeffkretz, flesler added
  • need changed from Review to Test Case

Could you provide a test case ? a minimalistic html file with the requires html and js to reproduce the problem. Thanks.

comment:2 Changed 6 years ago by jeffkretz

comment:3 Changed 6 years ago by jeffkretz

I realized there were two flaws in my original suggested patch. One is that the filter property may have other MSIE features, and erasing them all was too agressive.

The other is that setting filter="" doesn't actual cancel whatever MSIE is doing that messes with the page. removeAttribute is needed to get rid of it.

I've attached a new patch.

JK

comment:4 Changed 6 years ago by flesler

All seems good, just one problem:

.foo{
  filter:alpha(opacity=60)
}
...
$('.foo').fadeIn();

If I'm not wrong, once it reaches full opacity, it'd remove the filter thus the css filter would be applied. That isn't of course the expected behavior.

Maybe setting the opacity to 99 ?

comment:5 Changed 6 years ago by jeffkretz

Crap in a bucket -- you're right.

If the DOM element (as opposed to the style object) were available at that point in the code, it could say something like

if (elem.filter=="alpha(opacity=100)")
{
  elem.removeAttribute('filter');

  // If there was a class-based opacity assigned, re-set this to 100%.
  if (parent && parent.currentStyle && parent.currentStyle.filter)
    elem.filter = "alpha(opacity=100)";
}

This would entail adding a fourth parameter "parent" to the attr function when the elem.style is passed as the first parameter.

Is that going overboard? Is there a better solution?

I've added another potential patch with these changes.

JK

Changed 6 years ago by jeffkretz

comment:6 Changed 6 years ago by flesler

That seems like too much for such a specific situation.

What about setting a value close to 100 ? 99, 99.99 ?

comment:7 Changed 6 years ago by jeffkretz

Unfortunately, by setting the opacity to 99% I still run into the problem of the child element transparency "punching through" to the parent element.

This situation occurs when any filter property is assigned to the parent -- even alpha 100%.

Unless there is a third option?

JK

comment:8 Changed 6 years ago by jeffkretz

I realize adding the parent reference to the jQuery.attr method is a stretch, but I haven't yet been able to come up with a different solution that solves the original problem.

Have you had any other thoughts on this?

JK

comment:10 Changed 6 years ago by dmethvin

This solution was proposed in #3624, closed as a dup :

elem.filter = (elem.filter "").replace( /alpha\([)]*\)/, "" ) +
    (parseInt( value ) + == "NaN" ? "" : "alpha(opacity=" + value * 100 + ")");

That is, if opacity is set to blank, remove the filter.

comment:11 Changed 6 years ago by dmethvin

See also #3238

comment:12 Changed 6 years ago by brandon

  • Status changed from new to closed
  • Resolution set to duplicate

duplicate of #3238

comment:13 Changed 5 years ago by brandon

  • Status changed from closed to reopened
  • Resolution duplicate deleted

I believe I incorrectly closed this ticket as a duplicate of #3238. This ticket deals with the various issues relating to keeping the alpha filter in place.

comment:14 Changed 5 years ago by john

  • Status changed from reopened to closed
  • Version changed from 1.2.6 to 1.4a1
  • Resolution set to duplicate
  • Milestone changed from 1.3 to 1.4

This was talked about and fixed over in #4707.

Note: See TracTickets for help on using tickets.