Bug Tracker

Opened 11 years ago

Closed 11 years ago

Last modified 8 years ago

#3238 closed bug (duplicate)

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 (815 bytes) - added by nathanhammond 11 years ago.
Test Case

Download all attachments as: .zip

Change History (7)

comment:1 Changed 11 years ago by rwmech

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

comment:2 Changed 11 years ago by 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.

comment:3 Changed 11 years ago by 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) + '':
		"";
}

Changed 11 years ago by nathanhammond

Attachment: 3238.html added

Test Case

comment:4 Changed 11 years ago by dmethvin

See also #3502

comment:5 Changed 11 years ago by 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

comment:6 Changed 11 years ago by brandon

Milestone: 1.31.3.3
Resolution: duplicate
Status: newclosed

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

Note: See TracTickets for help on using tickets.