Text-Shadow Great in Firefox, But Horrid Elsewhere

HTML & CSS
1

I tried adding text-shadow to create a smooth font effect on some of my larger texts. It looks amazing in Firefox, but I just tested in Chrome, Safari and IE and it looks horrible.

Here is what I have:

text-shadow: 0px 0px 1px rgba(205,10,17,.8);

Looks awesome in Firefox, but either doesn’t exist or goes to **** in every other browser.

Any suggestions on how to make the look Firefox is creating more cross-browser compatible?

Cheers!
Ryan

2

Hi,

There’s not much you can do about it as that’s the way it has been implemented in those browsers. To my mind Chrome/safari (PC) look better than the Firefox version which looks slightly blurred and more like 2px than 1px. I expect there will be similar differences on the MAC system also as text always looks different there.

IE9 has no support for text-shadow but will be available in IE10 (don’t be tempted to use the IE filters as they do more harm than good).

3

Thanks for response. Yeah, I read that IE10 will have text-shadow working, so figured none of that filter nonsense.

The odd part is that Safari/Chrome look like there is no shadow at all. If I removed text-shadow entirely the text looks the same in Safari/Chrome. Like something is interfering with the attribute.

I’ve attached two screenshots. One shows how the texts look in Firefox (smooth), and how they look in Chrome/Safari (not so smooth)

It’s odd to me :frowning:

Chrome:

Firefox:

Thanks
Ryan

4

If I blow those screenshots up 800% I can see the shadow in Chrome but it is much fainter but definitely there. Maybe you could try a slightly darker shadow and see if it makes a difference. Is this a PC or mac screenshot?

It may help if you post all the relevant css and html so we can replicate that effect exactly with colours and backgrounds etc.

5

This is on PC (windows 7).

Here is the css that’s applied to “a” link:

font-size:16px; font-weight:normal; font-family: Arial, Helvetica, sans-serif; text-shadow: 0px 0px 1px rgba(205,10,17,.8); color:#CD0A11; text-decoration:none;

Cheers!
Ryan

6

Also, changing the text-shadow to 0px 0px 1px rgba(205,10,17,1) (so no transparency at all) made a huge difference. Definitely smoother now. But it does look a bit thick in Firefox now.

7

Chrome is fainter but if you put the normal and shadow versions of chrome side by side you can clearly see the difference.

The normal text in chrome renders slightly lighter than Firefox anyway so probably accounts for the difference.

As a last resort you could hack it (but I seldom like to do this) and give webkit a 2px shadow.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.test {
	font-size:16px;
	font-weight:normal;
	font-family: Arial, Helvetica, sans-serif;
	text-shadow: 0px 0px 1px rgba(205,10,17,.8);
	color:#CD0A11;
	text-decoration:none;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.test {
	text-shadow: 0px 0px 2px rgba(205,10,17,.8);
}

}
</style>
</head>

<body>
<p class="test">Lorem ipsum dolor sit amet</p>
</body>
</html>

But unfortunately that will hit safari as well which renders darker so its a losing battle. I think you’ll just have to live with it.

8

Going from .8 to 1 did make a heckuva difference, but let me give this a whirl! Thanks so much for you help, btw.

Cheers!
Ryan

9

The differences look more to me like the weights of the fonts than a problem with text-shadow itself.
Firefox does render a heavier weight than others I’ve seen.

You might also be able to increase legibility with this in webkit browsers.
http://maxvoltar.com/archive/-webkit-font-smoothing

10

Okay, I added webkit text stroke to make Chrome/Safari look cleaner and it worked. Though differently in both Chrome and Safari, both saw improvements in smoothness.

-webkit-text-stroke:.2px #CD3421 !important;

The color I chose was because the glow is typically on top of that green, so I saw what the #CD0A11 would become #CD3421 with 80% opacity on the green. So simulated the transparency effect a bit with the help of photoshop.

It’s still a bit short of Firefox’s ability to render the font, but close enough.

Cheers!
Ryan

11

Glad you managed to get something closer working :slight_smile: