Comments have been closed for this post.
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: 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.
Categories
Let's be social
Popular posts
- Django Tagging Autocomplete Tag-It
- Django: FileField with ContentType and File Size Validation
- 10 Effective Business Card Design Tips
- How to setup StaticGenerator with Apache + mod_wsgi
- IE8 doesn't like 1x1px semi-transparent backgrounds
Latest Comments
“ I got very good results with this, thanks for sharing. ”
By Yasir Atabani in How to speed up tests with Django and PostgreSQL
“ Hi Amad, for any question regarding OpenWISP, use one of the support channels: http://openwisp.org/support.html ”
By Federico Capoano in How to install OpenWISP
“ 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
“ Hi Ronak, for any question regarding OpenWISP, use one of the support channels: http://openwisp.org/support.html ”
By Federico Capoano in netjsonconfig: convert NetJSON to OpenWRT UCI
“ 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
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!”
Zee said:
( on 16th of November 2012 at 17:37 )
“THANK YOU!!!”
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.”
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 :-(”