Internet Explorer 7.0 and Opacity: Not even close!
Not only is the filter behavior is a pain in the ass but it also seems like it’s breaking IE’s rendering. Take a look at this page:
http://www.west-wind.com/atlas/Chat/Chat.aspx
with IE and then with FireFox. There are a couple of oddities.
First notice that the status box on the right doesn’t show transparency even though it has transparency assigned to it. As soon as a background color is applied to the div – before or after the opacity is assigned – the div refuses to show the opacity.
Another really annoying ‘feature’ is that apparently the use of the Filter causes ClearType to not work. Notice that the entire document uses ClearType (if you have it enabled) but when the opacity is applied the text no longer seems to respect it on any areas the opactity applies to (in this case the table with the big background image - the rest of the page renders fine. This is if ClearType is turned on the machine level and/or for IE (IE 7 has a new option to use ClearType even if the OS does not).
Much of this seems petty, but I would really like to avoid to writing style tags like this:
.ControlOpacity { opacity: .70; filter:alpha(opacity='70'); background:white;}
.Opacity80 { opacity: .90; filter: alpha(opacity='90'); }
.BackgroundImage { opacity:.8;filter:alpha(opacity='80');background:url(../images/sailbig.jpg); }
And having them flagged by HTML validators that can’t make sense of the Filter style. It gets worse if you need to set opacity in code. There are countless places in my server code where there are checks for this crap. We really don’t need this and this is an easy thing to fix…
What are these guys thinking? Seriously, how hard could it be for the IE team to add this functionality? Even if nothing else happens than internally mapping the opacity style to the alpha filter.
Oh I know – “we don’t have the resources…”. Riiiight…
Other Posts you might also like
The Voices of Reason
# re: Internet Explorer 7.0 and Opacity: Not even close!
http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx
"During our testing we noticed that DXTransforms are sometimes applied to elements that contain text (now rendered in ClearType). As our users also noticed, the ClearType text then looks extremely blurry - unfortunately these two technologies just don’t mix well. This is because the basic convolution transform used by DXTransforms does not take into account the spatial nature of ClearType.
To ensure good readability of Text in IE, in the Release Candidate build we decided to disable ClearType on elements that use any DXTransform. We will render the text in those elements as aliased text, in order to increase readability. The rest of the text in the page will render with ClearType. This may explain why some sites (or portions of sites) will render as aliased text, rather than ClearType."
This is dumb. Just like the PNG "fix" is dumb (and still incorrect; the gamma is way off!)
# re: Internet Explorer 7.0 and Opacity: Not even close!
Unbelievable Microsoft considers turning off ClearType this a solution to a 'rendering' problem. Heck, FireFox seems to render ClearType just fine ontop of opacity...
To make things even worse - running without ClearType has become almost impossible since Microsoft seems to be using a ClearType font as the main system font. No more MS Sans Serif, but something else is used that looks absolutely fucked up with ClearType off. It's funny to look at IE with ClearType off and a few toolbars installed. Every plug-in installed looks reasonably good but the native IE menus have like physical disconnects between dots.
This REALLY bites.
# re: Internet Explorer 7.0 and Opacity: Not even close!
Here's hoping they figure out a solution for the final Vista?
Ugh. I was once very excited for Vista, and now.. I really have my doubts. Microsoft has screwed up in too many ways on this one.
Are they going to wait another ___ years to write an OS? One that fixes all the "legacy code" problems?
# re: Internet Explorer 7.0 and Opacity: Not even close!
I've just transitioned over to the IE team as a product manager, so hopefully you don't mind me chiming in on this one.
The IE team is aware of the need to support per element opacity, and unfortunatly it didn't make the cut for IE7. As canned as this sounds, we are commited to bringing up standards support for future releases of IE. There isn't a great answer on this yet, but it's not something we're going to let slide off our radar.
# re: Internet Explorer 7.0 and Opacity: Not even close!
Examples? PNG support. This has been one of the top requested features since version 4 of IE came, and would have allowed for much more freedom in design. The development team just kept showily ignoring all of us. Their sole reply as to when transparent PNG support would be added, was "I cannot answer to that". What an insult... The fun part is that, the Mac IE version had a perfectly working transparent-png support
But, even normal PNGs have problems. So, suppose I decide to create a logo. A logo that sits on a background colour (and not a texture), that has pretty blurred shadows etc. You can solve it easily with a transparent PNG. But let's say that you don't want to use the IE-specific DX filter solution. What options do you have?
1) If I use a JPEG, I might risk that the logo might not blend well with the background color because of the compression.
2) If I use a GIF, the colors simply might not be enough (and the size of the image would be much greater). Don't even mention dithering, a dithered image this days is lame to say the least (hooray for the 20 years of GIF, the ENIAC of image formats, hehe).
3) Oh, here comes PNG with lossless compression, which is much more efficient than GIF's. What the hell, the gamma is off (works OK in all browsers, except, you guessed it, IE).
Standards support: When I changed to firefox, it was mainly because I needed a standards compliant browser (it would be even better if it was totally "fascist": "no correct markup? no page pal", by default) to test my web applications. ...And because it had much less security annoyances.
After a while, I found out that I had to also use the IE too for page layout validation, because it would have been way off, and would need (most of the times) IE-stupid-specific fixes, that would require coding twice for the same thing.
And I'm not even a Firefox-fanboy. I don't care what my browser is, as long as it can render a page correctly based on the standards.
As long as MSIE was the "top dog" in browser usage lists, with an almighty 95% piece of the pie, nobody on MS cared. Not even us developers, long lost were the dark days of dual page design for Notscape & IE. They only released security fixes, and that was it.
Now that this percentage has dropped, MS responds, with the (sadly) expected way: They put more focus and effort in implementing features such as tabs or RSS (which surely are useful, but they are NOT more important than standards compliance), features that might win back the users they lost on firefox (and other browsers), and they give much less focus on PRO-BLEMS, those that make a developer's life, complete HELL!
And no, I don't consider spending time in negotiations for the firefox RSS icon important.
So, where are we? IE7 has certainly improved over the stale IE6. Of course, it will take muuuuuuuuch more time before the amount of IE7 users would be enough to start implementing transparent PNGs and other not-IE6 stuff.
It wouldn't be an exaggeration if I said that Internet Explorer is one of the important reasons the Web evolves so slowly. I am angry (apologies if I sound insulting), and I will still be, until IE gets abandoned or gets fixed. And please, no more lame, intelligence insulting excuses. We are quite fed up with them. Fix the basic problems first, then we'll talk.
# re: Internet Explorer 7.0 and Opacity: Not even close!
Microsoft did a piss poor job on IE 7.0 and has brought nothing but excuses...
# re: Internet Explorer 7.0 and Opacity: Not even close!
But... what happens when standards are so incredibly wrong? This is the case with XHTML 1.1, and even worse, with the upcoming v2.0.
For starters, let's take the target attribute that was removed. Surf around the web, and you'll see many supporters (would I dare say... evangelists?) trying to convince their readers as to how good this was, and why using it, ruins the "Back-button-experience" for the user.
While I totally disagree with this decision, I can live with it (using javascript). But what about image maps? As far as I know, there is no possible way at all, to create an XHTML 1.1 page that contains an image map!
Don't get me started on the twisted XHTML 2.0 proposal and WCAG 2 & 3...
(Rick, it's actually Dimitris, which is the Greek version of Jim (or Dmitry), but you were right from an etymological pov :)
# re: Internet Explorer 7.0 and Opacity: Not even close!
# re: Internet Explorer 7.0 and Opacity: Not even close!
I've been trying to port a script to IE, and it's just one thing after another. After a full day of tweaks I've got it *barely* working. Then this! The mootools animation effect I was using that faded an object used tweening of integers, and can't be applied if the integer is embedded in a string.
I added this function:
function UserNeedsABetterBrowser() { return navigator.appName == "Microsoft Internet Explorer"; }
Needless to say there's a lot of "if (UserNeedsABetterBrowser())" in my code!
I think every time web developers bend over backward and make their scripts work just to appease IE, they are doing a disservice. It gives the illusion that IE is not a serious problem. At some point you have to make a stand and say: "No. IE support is too wonky. Get a better browser."
C'mon Windows users... at the very least use Opera... it's relatively fast and can run on older hardware like IE.
# re: Internet Explorer 7.0 and Opacity: Not even close!
# re: Internet Explorer 7.0 and Opacity: Not even close!
# re: Internet Explorer 7.0 and Opacity: Not even close!
ORRRRrr
If they wanted to stay in the browser business just simply use something that works (ie. Gecko or WebKit) and just customize it from there (like Google has done with Chrome).
I wonder how much time/$$ Microsoft has cost the developer community implementing hacks and things just to get their gimpy browser to somewhat work?
# re: Internet Explorer 7.0 and Opacity: Not even close!
Take care,
# re: Internet Explorer 7.0 and Opacity: Not even close!
Anyone else think that it's hilarious that the MS PM jumped on to throw us a line of BS and hasn't bothered to follow up with an update in 4 years... wow. The irony is sickening.
PS - y'all were right, Vista was and is a POS, I will never be part of the first wave of OS adopters as long as I live. Let all the suckers be the Guinea pigs and maybe after SP2 I'll consider an upgrade.
# re: Internet Explorer 7.0 and Opacity: Not even close!
God forbid we force mainstream sites to actually write compliant JS, CSS and HTML.