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)
Change History (6)
Changed August 13, 2008 06:04PM UTC by comment:1
Changed August 15, 2008 12:45AM UTC by 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 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 March 25, 2009 10:01PM UTC by 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
This looks like the similar issue I posted #3218 where opacity isnt handled correctly for IE.