CODEWITHSUNDEEP
javascriptcsstextsafarirendering
Armin Cifuentes
Armin Cifuentes

Reputation: 515

Text renders inconsistently in Safari (5.0.5)

I'm having a hard time resolving this.

I'm working on http://movingwineforward.com, but it renders text inconsistently, as you can see in this screenshot:

error

When the page loads, the text in the main menu looks thin (left), and is consistent with every other OS and Browser. But when clicked, it becomes a bit heavier as in the right side of the screenshot.

I checked every CSS property, both in the stylesheet and in Safaris (and Chrome) DOM Inspector, and they both are identical.

When I disable scripts in Safari, the text loads like heavier version (right), so I guess that is interfering. (I'm loading some Vimeo flash players, among other scripts).

For added mistery, this site is a copy of http://daf.cl, and they both have the exact same stylesheet, DOM (markup), font files, and Javascript. Only colors and content change. But in http://daf.cl the text loads initially in the heavier version and stays like that.

I've been able to reproduce this behaviour on Safari 505 running in OSX Leopard.

By clients request, the text has to look like the one on the right (heavier). I've tried forcing -webkit-font-smoothing and text-rendering in CSS, but none did the trick. Font weight does not look good, as it forces the typeface.

Update 1:

I know now when this ocurrs: only when there is a Vimeo flash player behind the menu, the text renders thinner. If there is no video behind, it looks heavier (as it should). Perhaps this brings new light. (I tried disabling jQuery Froogaloop for Moogaloop, but didn't work)

Upvotes: 3

Views: 623

Answers (2)

Daniel
Daniel

Reputation: 21

First, do this:

opacity: .99;

Applying this to the object containing your text will initialize it looking 'lighter'. So it wont't fix the issue in your preferred way (stick to 'regular' thickness), but will instead prevent the subsequent 'bounce' to the lighter looking variant.

Now, let's do some tweaking:

text-shadow: 0 0 1px rgba(255, 255, 255, 0.75);

Additionally applying a subtle text-shadow in the exact same color as the font will result in the text looking almost exactly like you want.

Upvotes: 2

John Kurlak
John Kurlak

Reputation: 6680

Though not a real solution, you could try adding something like

text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);

to the text.

Upvotes: 0

Related Questions