While working on intvoid.com I noticed that Google Chrome is rendering text differently than other browsers.  I am running on a MacBook Pro with the following browsers and versions:  Chrome 11.0.696.71, Safari 5.0.5, and Firefox 4.0.1.  You can clearly see in the screenshot below that the text is much weaker looking in the Chrome version of the webpage:

Google Chrome text-shadow issue

before CSS fix (from left to right: Chrome, Safari, Firefox)

I did some googling and found that Chrome has issues with the CSS level 3 text-shadow property.  Here’s a couple links:

There are a lot of people, especially graphic designers and web gurus, who refuse to use Chrome because of it’s rendering issues with the text-shadow property.  I’m not that harsh on Chrome…in fact I love Chrome.  It’s extremely fast, easy to use, and has a very clean design and interface.  But it is annoying that Chrome doesn’t follow the CSS text-shadow property correctly on Mac (I’m not sure if this is an issue with Chrome on Windows or Linux.  If somebody knows please leave a comment.)

So since I’m not willing to switch browsers I went about trying to find a way to fix my website so that if it is viewed with Chrome it will look the same as with Safari or Firefox.  I ended up just commenting out the parts of the style.css file of my WordPress theme that uses the text-shadow property:

h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,label,th,td,a
{
    /* text-shadow: 0 0 4px #444; */
}

After making that change, Chrome rendered the page in question identical to both Safari and Firefox.  Here’s the result after changing the CSS file:

Google Chrome text-shadow rendering fixed

after CSS fix (from left to right: Chrome, Safari, Firefox)

So until this problem is fixed in Chrome I’m going to stick with removing any text-shadow properties from my WordPress theme.

« »