Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs
Contact   •   Articles   •   Products   •   Support   •   Search
Ad-free experience sponsored by:
ASPOSE - the market leader of .NET and Java APIs for file formats – natively work with DOCX, XLSX, PPT, PDF, images and more

Internet Explorer 7.0 and Opacity: Not even close!


:P
On this page:

This is not a huge issue, but still this seems mighty lame: Internet Explorer 7.0 STILL doesn’t support the opacity CSS style and instead requires the continued inappropriate use of DirectX filters to specify opacity (this is in Vista build 5536 at least).

 

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…


The Voices of Reason


 

Nicholas
September 03, 2006

# re: Internet Explorer 7.0 and Opacity: Not even close!

I'm getting tired of hearing about how they can't fix most bugs/rewrite the code because of legacy applications that rely on the older IE bugs/exploits. Uhm, hello, isn't this is a good arguement on why integrating the browser into the OS is a retarded idea?

God forbid we force mainstream sites to actually write compliant JS, CSS and HTML.

Nicholas
September 03, 2006

# re: Internet Explorer 7.0 and Opacity: Not even close!

Also, I believe there was a blog entry recently on why ClearType gets automagically turned off in certain circumstances. Ok, found it:

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!)

Rick Strahl
September 03, 2006

# re: Internet Explorer 7.0 and Opacity: Not even close!

Wholly shit, Nicholas! They can't be serious about this. Take a look at the MSN homepage (www.msn.com) for example to see just how bad this particular issue is.

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.

Nicholas
September 03, 2006

# re: Internet Explorer 7.0 and Opacity: Not even close!

In the comment thread, someone asked if this is permananent, and will be in the final build, but no one's responded to it yet..

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?

Pete LePage
September 05, 2006

# re: Internet Explorer 7.0 and Opacity: Not even close!

Hey Rick,

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.


Dimitris Kavakopoulos
September 06, 2006

# re: Internet Explorer 7.0 and Opacity: Not even close!

"Commited"? Oh, come on, spare us. Internet explorer is not the victim, it's the PROBLEM for so many years now. Here is my long rant:

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.

Rick Strahl
September 07, 2006

# re: Internet Explorer 7.0 and Opacity: Not even close!

Sadly I agree with you Dmitry. I really wish it wasn't so <s>...

Microsoft did a piss poor job on IE 7.0 and has brought nothing but excuses...

Dimitris Kavakopoulos
September 07, 2006

# re: Internet Explorer 7.0 and Opacity: Not even close!

I'd like to add something to this matter. Let's settle for standards-inheritors screwing-up and deviating from the standards. I would even dare say that we have faced this phenomenon so many times by now, that we ended up having get used to it.


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 :)

Renzo Kooi
November 27, 2006

# re: Internet Explorer 7.0 and Opacity: Not even close!

Coded a tooltip script, and started to hate IE more and more for its lousy lack of standards. Ever tried the zoom function in IE7? Try it with my script, or google calendar or a number of sites that dynamically position elements on top of other elements. It's all very very annoying and extremely time consuming. If I only had to program for Mozilla, what a blessing that would be! I never was a MS basher, but if IE continues to develop like it has (not) developed, I am becoming one soon. IE7 is a big disappointment.

AJAX-Community Forum
December 09, 2006

# DIVSs im IE verblassen oder durchsichtig wird - AJAX-Community Forum

Ich habe folgendes Problem: Ich möchte einen DIV machen, der verschiebbar ist, beim verschieben durchsichtig wird und wenn er nicht auf einer

Hostile Fork
September 15, 2008

# re: Internet Explorer 7.0 and Opacity: Not even close!

Aaaaah! Can't believe this! Is there no end to the madness with IE?

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.

Roberto
January 27, 2009

# re: Internet Explorer 7.0 and Opacity: Not even close!

Help , I can't doit this filter , I don't know , what's a problem ...

Walter
February 14, 2009

# re: Internet Explorer 7.0 and Opacity: Not even close!

Oh, I got no problem with IE7 at all because I use Firefox and Opera. Firefox is going to be the standard because it follows standards.

Justin
February 17, 2009

# re: Internet Explorer 7.0 and Opacity: Not even close!

Microsoft has done such a piss poor job with Internet Explorer that I wish they would just ditch it completely...

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?

joe
March 23, 2010

# re: Internet Explorer 7.0 and Opacity: Not even close!

Simply put, Microsoft is more worried about security ghosts and implementing annoying controls than getting out a browser that works. I have stopped using IE as well. In fact we should advocate users to avoid IE all together and maybe then MS will wake up. It's truly a crappy and annoying product. No comparison at all, Firefox is a much better product.

Take care,

Matt
September 21, 2010

# re: Internet Explorer 7.0 and Opacity: Not even close!

I am working on a script that (of coures) works on EVERY browser except IE. Essentially, if the area of the div you are trying to make transparent is too large then no effect is rendered at all... grrrrrrr... works well in FF/Safari/Chrome. There also appears to be no work around, unfortunately we can't tell our users that we don't support IE. But issues like this cause us to strongly encourage our user base to adopt firefox.

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.

Nicolas Blackburn
April 27, 2011

# re: Internet Explorer 7.0 and Opacity: Not even close!

Guys, even ie8 has the clearfix problem with opacity. Haven't tried ie9 yet. I don't even hope for it as I know it's desperate. That's just plainly annoying. Isn't there some legal actions that could be taken against microsoft ? Like suing them for intentionally making development companies lose money...
 

West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2019