IE8 doesn't like 1x1px semi-transparent backgrounds


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.



  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.


Let's be social

Popular posts

Latest Comments

  1. I got very good results with this, thanks for sharing.

    By Yasir Atabani in How to speed up tests with Django and PostgreSQL

  2. Hi Amad, for any question regarding OpenWISP, use one of the support channels:

    By Federico Capoano in How to install OpenWISP

  3. Sir please guid , i have install the ansible-openwisp2 , now how to add the access points . What is the next procedure . Please help.

    By Ahmad in How to install OpenWISP

  4. Hi Ronak, for any question regarding OpenWISP, use one of the support channels:

    By Federico Capoano in netjsonconfig: convert NetJSON to OpenWRT UCI

  5. Hi, I have installed openwisp controller using ansible playbook. Now, i am adding the configurations automatically using OPENWRT devices in openwisp file by specifying shared_key so can you suggest me if I want to set limit to add configuration how can i do it?

    By Ronak in netjsonconfig: convert NetJSON to OpenWRT UCI

Popular Tags

battlemesh censorship creativity criptography django event fosdem 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 wifi wireless-community