Really Ropey Text Rendering In Internet Explorer With Layered Text

Question

I am in the process of writing a jQuery plugin for 3D text and for Firefox, Chrome and Safari (and other similar browsers) I am using the CSS3 text-shadow property to render the 3D text.

As a fail-over for Internet Explorer I am writing layers of text to get the same effect.

The problem I have is that when I put text on top of other text in Internet Explorer it renders in a rather nasty pixelated form - and it no better with ClearType switched on.

Does anyone know of any fixes for this issue?

I have an example that demonstrates this problem, at the moment you have to click the text to switch on "Internet Explorer Mode" (which actually renders fine in other browsers!)

http://www.stevefenton.co.uk/cmsfiles/assets/File/threedee.html

Hit the "Internet Explorer Mode" in Internet Explorer to see the nasty looking jagged text - do the same in another browser and there is no issue.

Answer 1

Here is the solution for anyone who has the same problem.

One of the options on the plugin was for "opacity" - which I was adding to the element using jQuery.css(). Removing the opacity from the Internet Explorer code path has resolved the problem entirely. I can probably live without the opacity for now...

Here is sample code you can use to replicate the problem.

<h1>Click Me To See Jagged Rendering</h1>
<script type="text/javascript">
    $("h1").click( function () {
        $(this).css({ opacity: 0.5 });
    });
</script>