Bug Tracker

Opened 14 years ago

Closed 13 years ago

#3502 closed bug (duplicate)

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
Blocked by: Blocking:


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.


Attachments (1)

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

Download all attachments as: .zip

Change History (14)

comment:1 Changed 14 years ago by flesler

Cc: jeffkretz flesler added
need: ReviewTest Case

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

comment:3 Changed 14 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.


comment:4 Changed 14 years ago by flesler

All seems good, just one problem:


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 14 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)")

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


Changed 14 years ago by jeffkretz

Attachment: core.patch added

comment:6 Changed 14 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 14 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?


comment:8 Changed 14 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?


comment:10 Changed 14 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 14 years ago by dmethvin

See also #3238

comment:12 Changed 14 years ago by brandon

Resolution: duplicate
Status: newclosed

duplicate of #3238

comment:13 Changed 14 years ago by brandon

Resolution: duplicate
Status: closedreopened

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 13 years ago by john

Milestone: 1.31.4
Resolution: duplicate
Status: reopenedclosed

This was talked about and fixed over in #4707.

Note: See TracTickets for help on using tickets.