IE8 doesn't like 1x1px semi-transparent backgrounds

12comments

8th May 2010 in Coding Tags: bug, ie8, -ms-filter, 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 image 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!

  2. 2.

    Anthony Hastings said:

    ( on 22nd of September 2010 at 12:01 )

    This melted my head on a project recently. There's a great lack of information about this bug on the web so I'm glad you put this up. Thanks for the solution!

  3. 3.

    Alex Salinas said:

    ( on 12th of October 2010 at 19:28 )

    Thank you, googled for quite a while until I found your fix really helped me.

  4. 4.

    Federico Capoano said:

    ( on 12th of October 2010 at 19:40 )

    Glad it helped you guys.

  5. 5.

    Tom Southall said:

    ( on 25th of October 2010 at 19:13 )

    What a strange bug! Thanks for the post - 2x2 backgrounds it is from now on then!

  6. 6.

    Striker said:

    ( on 26th of November 2010 at 20:15 )

    I stumbled across this weird bug as well. I managed to solve it myself, but googled the issue to see if it was just my computer. I'm sure glad someone has put the solution out on the internet.

  7. 7.

    Rustam said:

    ( on 6th of April 2011 at 01:07 )

    Dump IE - that makes our live 'interesting'. They have to learn how to code properly.
    Thank you for sharing with us

  8. 8.

    ITSAF said:

    ( on 6th of July 2011 at 03:30 )

    Thanks a lot,
    After 5 hours of trying everything this solved the issue.

  9. 9.

    Andrew Chart said:

    ( on 11th of May 2012 at 15:07 )

    Very strange bug- thanks for the fix!

  10. 10.

    Zee said:

    ( on 16th of November 2012 at 17:37 )

    THANK YOU!!!

  11. 11.

    Zee said:

    ( on 16th of November 2012 at 17:38 )

    If you are expiriencing problems after, then mainly your problem is 'opacity'.
    After animating remove this attribute, else in IE8 it will be shown as grey.

  12. 12.

    Netmatter said:

    ( on 2nd of September 2013 at 01:25 )

    Thanks for this one, been going mad over it all day! Daft solution but very handy, thank you! Hate IE :-(

Comments are closed.

Comments have been closed for this post.

Categories

Let's be social

Popular posts

Latest Comments

  1. Great news Aymará! Very happy to know this post has inspired you to experiment :-)

    By Federico Capoano in First DjangoGirls Rome wrap-up & afterthoughts

  2. Hi!! I'm a Django Girls coach too. Here, in Argentina, made just what you suggested, splited the workshop in two days. The experiment went just great! Most of the girls achieved to publish the blog from ground 0. It feels great to be helpfull ...

    By Aymará in First DjangoGirls Rome wrap-up & afterthoughts

  3. Send any question to the interop-dev mailing list or open an issue on github.

    By Federico in Network Topology Visualizer: django-netjsongraph

  4. I have a question about Network Topology Collector, can you brief me pls?

    By Nasrin Akter in Network Topology Visualizer: django-netjsongraph

  5. Thanks !

    By Alois in How to speed up tests with Django and PostgreSQL

Popular Tags

battlemesh censorship creativity criptography django event google-summer-of-code ibiza inspiration javascript jquery linux nemesisdesign netjson ninux nodeshot open-source openwisp openwrt performance photo programming python security staticgenerator talk upload wireless-community