Nemesis Design
Hello, my name is Federico Capoano,
I enjoy developing cutting-edge websites
and working with creative people.
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 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.
Categories
Let's be social
Popular posts
- Django: FileField with ContentType and File Size Validation
- IE8 doesn't like 1x1px semi-transparent backgrounds
- Nice Skip Links Appearing on :focus with CSS
- 10 Effective Business Card Design Tips
- How to setup StaticGenerator with Apache + mod_wsgi
Latest Comments
“ nice site i really learn a lot more power to your blog <a href="http://staying-healthy.info">healthy living</a> ”
By health is wealth in Nice Skip Links Appearing on :focus with CSS
“ Very strange bug- thanks for the fix! ”
By Andrew Chart in IE8 doesn't like 1x1px semi-transparent backgrounds
“ Completely agree about keeping it simple, sometimes people try a little too hard ”
By ryan in 10 Effective Business Card Design Tips
“ I just wanted to say that your blog has been really useful. ”
By Kerala in Django: How to Retrieve Query String Parameters
“ Thank you this was exactly what I have been searching for. ”
By Kerala in Django Tagging Autocomplete Tag-It
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!”
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!”
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.”
Federico Capoano said:
( on 12th of October 2010 at 19:40 )
“Glad it helped you guys.”
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!”
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.”
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”
ITSAF said:
( on 6th of July 2011 at 03:30 )
“Thanks a lot,
After 5 hours of trying everything this solved the issue.”
Andrew Chart said:
( on 11th of May 2012 at 15:07 )
“Very strange bug- thanks for the fix!”