CODEWITHSUNDEEP
cssios6
sacrosby
sacrosby

Reputation: 11

text-shadow applied to Google Web Fonts in iOS browsers

I'm getting a problem on iOS with the standard text-shadow effect applied to Google Web Fonts. The font appears doubled with a shadow behind two layers of the font-color. It's most pronounced on my non-retina ipad mini. I've seen no such behavior on my laptop browsers.

Any suggestions on why this is happening?

Here's a demonstration easy to type into an ios browser: Link

For now, I just have a * selector stripping text-shadow off all text on smaller screen sizes using media queries. maybe there's a better patch on the problem.

Here's a screenshot from an iPad mini: photo.jpg

Screen shot Screen shot (iPhone 4S)

Upvotes: 1

Views: 1300

Answers (1)

Jørgen R
Jørgen R

Reputation: 10806

Searching didn't get me anywhere, it might be related to the percentage offset compared to the text size (when you scale the text from 32px to 20px the 2px is a bigger fraction). You could try to experiment with using % in stead of px, or just add the following.

In your responsive CSS, add

@media (max-width: 767px) {
    text-shadow: text-shadow: -1px 1px 1px;
}

This renders much nicer on the smaller text

EDIT I see that you have updated your question with a screenshot. This offset render bug might be the same as described here. The problem seems to be that you are using font-weight: bold and that Mobile Safari can't handle it. The solution seems to be to set it to normal.

/*reset for mobile browsers */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

Upvotes: 1

Related Questions