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
“ @halcion: read the previous comment of Bill who explained that Internet Explorer 8 considers JPEGs as 'image/pjpeg'. ”
By Federico Capoano in Django: FileField with ContentType and File Size Validation
“ Staticgenerator is lightning fast since well it's just about serving static html, however that's going to be a problem with any dynamic page sections. Thanks . ”
By halcion in How to get comments working with Django StaticGenerator
“ I like how your business card example displayed here matches your website design. It's really help me to make my new business card. ”
By halcion in 10 Effective Business Card Design Tips
“ I love the colour of the sand, the rocky wall, the waves and atmosphere... so relaxed and free. This post provide lot of information about the beauty of the nature. ”
By halcion in Sunrise Aguas Blancas Ibiza 10/10
“ I just found that some JPG file could not be uploaded only in IE8 when using your snippet. Any way I'll be subscribing to your feed and I hope you post again soon. ”
By halcion in Django: FileField with ContentType and File Size Validation
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.”
halcion said:
( on 5th of February 2012 at 14:12 )
“I'm sure glad someone has put the solution out on the internet.They have to learn how to code properly. Thank you for sharing with us”