ie6/7 opacity issue

[kof13]

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.

[rwmech]

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

[nathanhammon]

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.

[nathanhammon]

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) + '':
		"";
}

[nathanhammond]

Test Case

[dmethvin]

See also #3502

[juliovedovatto]

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

[brandon]

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