Skip to main content

Bug Tracker

Side navigation

#3238 closed bug (duplicate)

Opened August 10, 2008 04:54PM UTC

Closed May 14, 2009 04:55PM UTC

Last modified March 14, 2012 04:25PM UTC

ie6/7 opacity issue

Reported by: kof13 Owned by:
Priority: trivial Milestone: 1.4
Component: effects Version: 1.2.6
Keywords: Cc:
Blocked by: Blocking:
Description

If the element has in css display: none; and opacity for example 0.7,

filter:alpha(opacity=70);

-moz-opacity: 0.7;

opacity: 0.7;

and now I want to show this element by using $('#element').show() or $('#element').fadeIn(150), FF opacity after show is correct, (0.7), ie6 and ie7 shows opacity 100.

Attachments (1)
  • 3238.html (0.8 KB) - added by nathanhammond August 15, 2008 05:56AM UTC.

    Test Case

Change History (6)

Changed August 13, 2008 06:04PM UTC by rwmech comment:1

This looks like the similar issue I posted #3218 where opacity isnt handled correctly for IE.

Changed August 15, 2008 12:45AM UTC by nathanhammon comment:2

Using the posted test case:

.show() appears to work in FF3, Safari 3.1.2 (Win), Opera 9.5, IE6, and IE7. It doesn't work in IE8 but at this point I blame them for that.

.fadeIn() appears to work in FF3, Safari 3.1.2 (Win), and Opera 9.5. It doesn't work in IE.

Changed August 15, 2008 05:54AM UTC by nathanhammon comment:3

This little bugger in core.js is where the problem resides. IE doesn't count elem.filter as being set unless it is done inline. I've updated the test case to show a working scenario. I don't know how to/if it is possible to fix this.

// IE uses filters for opacity
if ( msie && name == "opacity" ) {
	if ( set ) {
		// IE has trouble with opacity if it does not have layout
		// Force it by setting the zoom level
		elem.zoom = 1;

		// Set the alpha filter to set the opacity
		elem.filter = (elem.filter || "").replace( /alpha\\([^)]*\\)/, "" ) +
			(parseInt( value ) + '' == "NaN" ? "" : "alpha(opacity=" + value * 100 + ")");
	}

	return elem.filter && elem.filter.indexOf("opacity=") >= 0 ?
		(parseFloat( elem.filter.match(/opacity=([^)]*)/)[1] ) / 100) + '':
		"";
}

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

See also #3502

Changed March 25, 2009 10:01PM UTC by juliovedovatto comment:5

I made two fixes in 1.3.2 source

  • One is a modification made for me
  • Other is a regex fix

The modification made for me:

// From
return elem.filter && elem.filter.indexOf("opacity=") >= 0 
	? (parseFloat( elem.filter.match(/opacity=([^)]*)/)[1] ) / 100) + ''
	:"";
//To
return elem.filter && elem.filter.indexOf("opacity=") >= 0 
	? (parseFloat( elem.filter.match(/opacity=([^)]*)/)[1] ) / 100) + ''
	:"0";

When I Put "0" in else clause, the opacity works, but it concatenate many times alpha(opacity=number);

See this:

alpha(opacity=1800)alpha(opacity=2000)alpha(opacity=2000)alpha(opacity=2200)alpha(opacity=2200)alpha(opacity=2400)alpha(opacity=2400)alpha(opacity=2600)alpha(opacity=2600)alpha(opacity=2900)alpha(opacity=2900)alpha(opacity=3100)alpha(opacity=3100)alpha(opaci

So, this is buggy

After SOME HOURS debugging, I found the cause: a regex error:

(elem.filter || "").replace( /alpha\\([)]*\\)/, "" )

This regex never replace the string, because they miss a simple character of denial!

The fix:

(elem.filter || "").replace( /alpha\\([^)]*\\)/, "" )

Please, pay attention for this cases. I lost some hours because a simple regex.

Now my new poblem: The opacity always start from 0.

How fix it?

Regards

Changed May 14, 2009 04:55PM UTC by brandon comment:6

milestone: 1.31.3.3
resolution: → duplicate
status: newclosed

Closing as a duplicate to #3981 which was resolved in r6349