1 Reply Latest reply on Jan 30, 2010 5:53 AM by jyeager11

    How IE interprets CSS opacity values differently from FF...

    jyeager11 Level 1

      Ever notice that IE -- even IE8 -- just doesn't seem to like PNGs?

       

      We used to need IEPNGFIX.HTC to simply enable PNG transparency support in IE. It appears we no longer do (just tried removing the fix and it still works).

       

      However, there are still bugs to fix or work around. For instance, if you create a PNG gradient that goes from 100% opaque on one side, to 100% transparent on the other (with every level of transparency in-between, naturally) it will show up fine in both modern IE / FF browsers.

       

      Until you try applying a CSS opacity value to it.


      a.opacity:hover img {
          filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
          opacity: 0.8;
          -moz-opacity: 0.8;
      }

       

      The above code will make any image 80% opaque (in other words, 20% transparent) when the "opacity" class is assigned to the enveloping "a" tag. This is a nice, simple, bandwidth-saving method of creating a subtle mouseover effect on image links.

       

      And it works like a charm in FF. Pixels that were 100% opaque become 80% opaque on mouseover. Pixels that were 50% opaque to begin with become 40% opaque (80% of 50%). And so on... so that PNG gradient we were talking about that uses every opacity value in the spectrum (from 100% opaque to 100% transparent) becomes a bit more transparent everywhere, proportionately.

       

      The Alpha filter in IE, however, is interpreted too litterally. It assigns an 80% opacity value to every single pixel, regardless of what its value was before the filter was applied. So that PNG gradient goes through an unwanted "flattening" effect of the alpha channel values, before submitting to the encompassing value specified in the CSS code.

       

      In other words, the fade to transparent is no longer a fade. It becomes a solid 80%, across the board, on mouseover, with the above code.

       

      Is there an alternate way for me to assign a CSS opacity value to a PNG with various levels of opacity in it (like a shadow fade/gradient that starts opaque and finishes transparent) and have it work in IE *without* that undesired flattening effect? In other words, to tell IE that I want the IMAGE to be 80% opaque, as opposed to having every individual pixel's transparency value overriden and set to this single value.

       

      The filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); code is one I've been using for 6 or 7 years... perhaps there's something more updated for IE that I can use, that doesn't take the command too litterally?

       

      Thanks!

        • 1. Re: How IE interprets CSS opacity values differently from FF...
          jyeager11 Level 1

          * Update *

           

          Replacing...

          filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);

           

          ...with...

          filter:alpha(opacity=80)

           

          ...seems to work in the same way, including the unwanted alpha channel-flattening side-effects in IE. But at least it's shorter code, which I like.

           

          So the code is now :

          a.opacity:hover img {
              filter:alpha(opacity=80);
              opacity: 0.8;
              -moz-opacity: 0.8;
          }

           

          Still looking for a way to make IE calculate 80% opacity of whatever the opacity of the pixel was before, instead of overriding the alpha channel value of all pixels in the PNG with a flat number.