Wednesday 17 July 2013

IE7 and IE8 text rendering problem

We recently changed the design of an internal site I was working on for BMW and suddenly the text started rendering less clearly in IE7 and IE8. We were using a webfont, but that had not changed at all between the designs. After much investigation I realised that we had introduced a gradient behind the text. This was implemented in IE using:

filter: progid:DXImageTransform.Microsoft.gradient

Turning these gradients off fixed the rendering problem. We therefore reverted back to using images for IE:

background-image: url( 'background_image.png' );

So, it appears it is not a good idea to place text using a webfont over gradients created using the gradient filter in Internet Explorer.

No comments:

Post a Comment