Mysterious Gradient in IE8
Internet Explorer is full of odd behaviors but this one has got to take the cake.
Recently a bug was reported in one of my websites for an IE8 user. Instead of seeing an opaque grey background on my navigation they were seeing a gradient that faded from the top to bottom corner into transparency. Making the text really really hard to read.
Fortunately I harnessed the power of the internet and the Google search engine to find this post:
http://stackoverflow.com/questions/2869982/what-would-cause-this-behavior-in-only-one-persons-ie8I found this gentleman's issue on another site he posted it to and it was the EXACT same thing I was experiencing.
The solution? Apparently IE8 has built into it's rendering engine to take a 1x1 pixel background image and turn it into a gradient. Huh? Yeah that's what I said it turns it into a gradient. Why on earth this would ever be useful behavior I have no idea but so it is.
The fix? A fantastic user over at StackOverflow posted their solution which was to change the image to 10x1 pixels instead of the 1x1 and....tada fixed!!!
Man that was a mystery and a half that one. So grateful for my search engine skills today.
Tags: corner, css, gradient, ie8, png, top to bottom, transparent