IE8 doesn't like 1x1px semi-transparent backgrounds

8th May 2010 in Coding Tags: -ms-filter, bug, ie8, transparency

While developing this web-site I encountered one of those little tipical annoying bugs that characterize Internet Explorer.

Even if version 8 is a much better browser than versions 6 and 7, it still sucks under many points of view if compared to other modern browsers like Firefox, Safari, Chrome and Opera.

The issue I want to talk about in this post is the use of a repeated 1x1 pixel semi-transparent background. While this works just fine in all the other modern browsers, IE8 has a little issue that drove me mad.

After doing some testing with static html files for a couple of hours, I finally found the cause of this problem: Internet Explorer 8 doesn't perform the repeat of a 1x1 pixel semi-transparent background images correctly when any other element on the page is using the "-ms-filter" drective for the alpha transparency:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

The fix: using a 1x2 or 2x2 pixel image

Do not ask me why, just make your semi-transparent image a bit bigger and it will work fine also in the case previously described.

Try the demos

Open the demo1 with internet explorer 8 to see the issue, while try the demo2 to see that the same code without the -ms-filter css directive doesn't cause the issue.

Retweet

Comments

  1. 1.

    Julie Melton said:

    ( on 1st of June 2010 at 08:52 )

    “I don't think I've seen this depicted that way before. You really have made this so much clearer for me. Thanks!”

Leave your comment

« More recent post Older post »

Categories

Let's be social

Popular posts

Latest Comments

  1. “ hey man I like it. I'm ready to write more posts and put your ideas to the test. After all, we always have something new to learn and being humble, I came here to learn. Bookmarked. - Andre ”

    By HTML Forms in Water Inspiration Round up

  2. “ Great tips. Thanks for sharing. ”

    By Mondo Print in 10 Effective Business Card Design Tips

  3. “ the water is my element!!! ;-) ”

    By angelo in Water Inspiration Round up

  4. “ @Vishnu So I guess the HTML page is trying to load an address that gives a 404. Instead of using Alias, that might be bypassed by the rewrite rule, link (symbolic link) the static-media folder into the public folder. Example: Create a link called "site-media ... ”

    By Federico Capoano in How to setup StaticGenerator with Apache + mod_wsgi

  5. “ Hi Federico, Am Back Again. I have a issue. ----------- Alias /static-media/ /home/django/mysite/static-media/ RewriteEngine On RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME} !-f RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME}/index.html !-f RewriteRule ^/(.*)$ /my.wsgi/$1 [QSA,L,PT] WSGIScriptAlias /my.wsgi /home/django/mysite/my.wsgi ---------- A setting like ... ”

    By Vishnu in How to setup StaticGenerator with Apache + mod_wsgi

Popular Tags

nemesisdesign