14

IE 8 and lower render text awfully if it is over any element that has a "filter" applied. Nothing really surprising with that. I usually just avoid using "filter". However, I was doing some testing in IE9 and I noticed a HUGE problem; text that is rendered over any element with a css3 gradient or box shadow applied, the text rendering is destroyed. Not just for the text directly on top of the element, but every element that is above the gradient in the z-index. For example, if I define the background of my page with a gradient, cover it in a solid white div and then render text on top of that, it is still terrible. I'm really hoping that this is just a beta issue that will be addressed in the final release. I've been using the code here, for gradients for awhile (minus the filter), but now in IE9 all of the pages that use this technique look horrible. Does anyone know anything about this- I couldn't find anything about this issue when I googled it.

Jo Sprague
  • 16,523
  • 10
  • 42
  • 62
  • 1
    Microsoft is pretty picky about keeping their bug lists private especially for beta projects. With that being said I have not seen anything as yet but only a release will answer the question. – PseudoNinja Dec 21 '10 at 14:42
  • 2
    *Crossing my fingers* I hate it when I create a would-be awesome site, and the client looks at it in IE and asks why the text-rendering sucks. I wish I could blame it on IE at that point, but to a client that never matters. – Jo Sprague Dec 24 '10 at 13:05
  • 3
    See that: http://stackoverflow.com/questions/9156731/text-rendering-is-screwed-with-gradient-on-ie and http://stackoverflow.com/questions/2503920/css-gradients-in-ie7-ie8-is-causing-text-to-become-aliased –  Mar 27 '14 at 11:22
  • 1
    Consensus is graceful degradation - use solid colour for old IE or background image - let newer IE get the new(ish) shiny. – Ruskin Jun 18 '14 at 10:28
  • possible duplicate of [IE creates font-icon strange underline](http://stackoverflow.com/questions/16362692/ie-creates-font-icon-strange-underline) – Paul Sweatte Jun 20 '14 at 02:06
  • I agree with Ruskin. I would say to use a 1px wide image with the gradiend and do background-repeat: repeat-x; on it. – cpk Aug 08 '14 at 22:02

1 Answers1

1

Four years later I think it's safe to say this was a beta issue.

Opening the example in IE 8 there are no noticeable problems except for the always-crappy antialiasing in IE 8 on platforms like Windows XP.

A lot has changed.

xaddict
  • 1,302
  • 3
  • 19
  • 38