I'm trying to accomplish something (limit certain lines to about 50 characters) and I've found a way to do that. But along the way I've found a behavior that I can not understand. Could someone explain why some of the text blocks shrink in font-size (and also then relative measurements like ems and even rems shrink with them)?
The first two paragraphs in the code below are enough to reproduce the error. The additional lines are to provide additional clues.
<!DOCTYPE html>
<html>
<head>
<title>Debug 2 viewport</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1>Debug 2 viewport</h1>
<p>1234567890 good no width</p>
<p style="width: 40em">1234567890 bad width 40em</p>
<p style="width: 50rem">1234567890 bad width 50rem</p>
<p style="width: 60ch">1234567890 bad width 60ch</p>
<p style="width: 640px">1234567890 bad width 640px</p>
<p style="width: 90%">1234567890 good width 90%</p>
<p style="width: 3in">1234567890 bad width 3in</p>
<p style="width: 82vw">1234567890 good width 82vw</p>
<p style="width: 81vw">1234567890 bad width 81vw</p>
<p style="border: solid thin">1234567890 good no width</p>
<p style="border: solid thin; width: 40em">1234567890 bad width 40em</p>
<p style="border: solid thin; width: 50rem">1234567890 bad width 50rem</p>
<p style="border: solid thin; width: 60ch">1234567890 bad width 60ch</p>
<p style="border: solid thin; width: 640px">1234567890 bad width 640px</p>
<p style="border: solid thin; width: 90%">1234567890 good width 90%</p>
<p style="border: solid thin; width: 3in">1234567890 bad width 3in</p>
<p style="border: solid thin; width: 82vw">1234567890 good width 82vw</p>
<p style="border: solid thin; width: 81vw">1234567890 bad width 81vw</p>
</body>
</html>This looks fine if you run the snippet in the stackoverflow preview, and it looks fine in every desktop browser I've tried. And it seems to work as well in several Android browsers. But in Chrome 101.0.4951.41 on Android 11 on a Samsung Galaxy A71 it looks like this:
Screenshot of unusual rendering
Each line marked "bad" appears to have a smaller text-size than the lines marked "good".
I can get the same effect even when I ask for a horizontal rule 40 characters wide, it will come out only 20 digit-0 characters wide.
Also please note that I get identical results with a separate CSS stylesheet. I only did the inline style attributes for this post because it made it easier to match the styles to the behaviors. And again, I'm not looking for a workaround to achieve my formatting goals: I'm looking for an explanation of why I'm seeing this behavior in some browsers.
Thank you!
P.S. I can get a similar error (slightly different lines shrink) for a similar document (but without the viewport element) in a shared online environment as shown here:
