#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)
Change History (7)
comment:1 Changed 14 years ago by
comment:2 Changed 14 years ago by
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 14 years ago by
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) + '': ""; }
comment:5 Changed 13 years ago by
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 13 years ago by
Milestone: | 1.3 → 1.3.3 |
---|---|
Resolution: | → duplicate |
Status: | new → closed |
This looks like the similar issue I posted #3218 where opacity isnt handled correctly for IE.