Site Navigation

Tuesday, April 8, 2008

bug 333 - microsoft drops all support for opacity in IE8!

Issue: #333
Affects: IE8 Beta 1 - IE8 RTM?
Status Fixed in IE8 PR1 (see notes)
MSIE Feedback ID: 331735

According to blogs around the 'Net and the IE Feedback site Microsoft has dropped all support for CSS opacity in IE8.

This includes the CSS3 property:

opacity: 0.25;
AND
filter:alpha(opacity=25);

Apparently this is "By Design". As a developer I seriously hope they reconsider this. The filter hack wasn't the best, but no method to set opacity is certainly not "innovation".


Example:

<style type="text/css">
.inDragMode {
opacity: 0.25;
filter: alpha(opacity=0.25);/* Hack for IE 6-7? */
}
</script>



Known Workarounds: Fixed (Notes): One.
As part of IE8's push towards better supporting Web standards they needed to alter the syntax of the proprietary filter() syntax. To make opacity work in IE8 (and all browsers), you'll need to do this.


#faded {
opacity: .5; /* Standards Based Browsers */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* IE (before IE8) */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */
}

or for the short form:

#faded {
opacity: .5; /* Standards Based Browsers */
filter: alpha(opacity=50); /* IE (before IE8) */
-ms-filter: "alpha(opacity=50)"; /* IE8 */
}



Related Issues: None.

Bug/Site Feedback |
Submit a bug