Unnerving IE6 box-shadow filter bug
I realize it is futile to complain about bugs in year-old software. Still, I have to get this out there, so I know it is documented. I have encountered this numerous times, but most recently during my work for Deutsche Börse (in my function as web developer for ultrabold).
The bug I’m referring to occurred, when I was working to find a replacement for CSS box-shadow, one preferrably employed using CSS and most important, working in Internet Explorer 6 and up. Don’t ask.
I was pretty happy when I came across a solution that used the dreaded filter property to create multiple drop shadows around a given element. It looks nasty compared to the real thing, but better than anything else I had come up with so far.
After I had implemented this rather wordy technique in CSS on multiple occasions, I thought I was done.
To my dismay, tests in various versions of IE (6-8) showed a bug that I had no idea how to fix: with elements using this filter, form input elements inside had their text cursors offset by the width of the fake box shadow. which is very much unacceptable of course. you were still able to focus and type, but the text showed up outside the field.
After some research I gave up, as there were few reports of this happening, and no solutions. I had no choice but to replace every instance with more, non-semantic markup, an image-based shadow (which in IE 6 required a PNG alpha fix— facepalm) and a few javascript fixes.
Let us hope that those days are behind us, now that IE9 turned out quite nicely, rendering regular CSS box-shadow as expected intended.
My advice is, this time, no advice. Go without the box shadow filter if you can, and if you are a daredevil, go for it. But think of the form inputs.