#3502 closed bug (duplicate)

Opened October 20, 2008 09:47PM UTC

Closed December 05, 2009 02:23AM UTC

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:

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.

Attachments (1)

core.patch (1.3 KB) - added by jeffkretz October 22, 2008 09:58PM UTC.

Change History (13)

Changed October 21, 2008 01:54AM UTC by flesler comment:1

cc:	→ jeffkretz, flesler
need:	Review → Test Case

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

Thanks.

Changed October 21, 2008 11:24PM UTC by jeffkretz comment:2

Sure, test case at:

http://test1.scorpiondesign.com/LocalTest.htm

Changed October 22, 2008 06:24PM UTC by jeffkretz comment:3

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.

Changed October 22, 2008 06:30PM UTC by flesler comment:4

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 ?

Changed October 22, 2008 09:58PM UTC by jeffkretz comment:5

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.

Changed October 22, 2008 10:06PM UTC by flesler comment:6

That seems like too much for such a specific situation.

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

Changed October 22, 2008 11:49PM UTC by jeffkretz comment:7

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?

Changed October 27, 2008 05:44PM UTC by jeffkretz comment:8

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?

Changed January 17, 2009 07:31PM UTC by dmethvin comment:9

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.

Changed January 17, 2009 07:34PM UTC by dmethvin comment:10

Changed March 17, 2009 10:38PM UTC by brandon comment:11

resolution:	→ duplicate
status:	new → closed

duplicate of #3238

Changed May 14, 2009 04:51PM UTC by brandon comment:12

resolution:	duplicate
status:	closed → reopened

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.

Changed December 05, 2009 02:23AM UTC by john comment:13

milestone:	1.3 → 1.4
resolution:	→ duplicate
status:	reopened → closed
version:	1.2.6 → 1.4a1

This was talked about and fixed over in #4707.

Side navigation