Opacity set for 1 causes problems in IE

[jeffkretz]

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

[flesler]

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

[jeffkretz]

Sure, test case at:  http://test1.scorpiondesign.com/LocalTest.htm

[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

[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 ?

[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

[flesler]

That seems like too much for such a specific situation.

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

[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

[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

[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.

[dmethvin]

See also #3238

[brandon]

duplicate of #3238

[brandon]

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.

[john]

This was talked about and fixed over in #4707.