font-size: in p:first-letter not working right on Android chrome

There's a problem that shows up on a Nexus 7 in which font-size: isn't working properly in a p:first-letter selector.

p:first-letter {
    font-size:1.3em;
    font-weight:bold;
    color:#662020;
}

Screen shots from the Nexus 7 Chrome below. On the left is it in landscape orientation and looks as expected with the first letter larger. On the right the same page in portrait mode. Note the first letter, "V" has become smaller than the rest of the text. I tried setting font-size:130% and it looks the same, too small.

There are also similar problems with p:first-line that are probably related. I only see these issues on Android devices.

Any clues how to fix this (some meta viewport magic or something) or a work around?

Answers


This looks like it might be Font-boosting. Chrome will look at the page and work out if it needs to boost the font-size to make the text readable, in this case there is a chance that it is boosting the copy higher than the :before font-size.

Make sure you have a viewport set: and that should limit the effect of font boosting.

If you can also provide a demo site that will help me diagnose it further


Yes, there's a known bug: http://crbug.com/253763 (feel free to star it).

I'm a little confused by your screenshots though, because when I view vijayanderson.com/bio on a Nexus 7 everything looks fine. What version of Chrome are you using (Settings > About Chrome), and what do you have Settings > Accessibility > Text Scaling set to?


This is response to @Kinlan - it's long and so I made it an answer instead of a comment.

"font-boosting" - I knew it was happening but didn't know what it was called. If you want to look at the live site it's http://vijayanderson.com/bio.

The meta viewport is a standard one:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

It seems like a bug in font-boosting in that it doesn't boost p:first-letter and p:first-line. It will appropriately boost a span with enlarged font in the paragraph, so a replacing p:first-letter with a span will look right, but is not the right fix.

I do not want to disable font-boosting, I think it adds usability. Thanks for your response.


Need Your Help

WIX install default feature not installed

wix

I am very new to WIX installer, I have the following feature: