Why does the font-size change for container bigger than 50%?

user_15193681 0
Viewed 310

This is a little test page. On the desktop it looks normal to me.

<html>

<head>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <style type="text/css">
    div {
      background: green;
      font-size: 15px;
    }
  </style>
</head>

<body>
  <div style="width:10%">10%</div>
  <div style="width:20%">20%</div>
  <div style="width:30%">30%</div>
  <div style="width:40%">40%</div>
  <div style="width:50%">50%</div>
  <div style="width:60%">60%</div>
  <div style="width:70%">70%</div>
  <div style="width:80%">80%</div>
  <div style="width:90%">90%</div>
  <div style="width:100%">100%</div>
</body>

</html>

But on my iPhone it has a strange behavior. In portrait mode everything is ok. But in landscape mode the browser calculates different font sizes although they are all set to 15px. Is there something I don't understand about font-size? I need them to look all the same.

View from Safari on iPhone

Same thing happens on firefox, edge and chrome

font-size mobile-safari css
3 Answers

I looked on the apple.com web page to see if they have the same issue. And they don't.

They use

-webkit-text-size-adjust: 100%;

and then the font size is everywhere the same.

user_151936810

This is not an answer, but an attempt to provide more debugging details to others looking into the issue.

I reproduced the bug in a JSFiddle to easily inspect it in the official Simulator. To inspect the page as Simulator renders it, open the page in Simulator, then open Safari on the host system and go to Settings → Advanced → enable Show Develop Menu. Following this, you can use Develop → Simulator → Show to inspect the page.

Following the above, the bug is reproducable when the phone is in landscape mode.
Inspecting the page, the styles on the element are shown as they should be. However, looking at the computed styles, we can see that a new font-size value of 21px has appeared with no inheritance.
Following the style's reference simply takes us to the 15px font-size definition.

Screenshot of Safari's inspector

Setting !important or other alternative configurations seem to have no effect on this value.

Outside of a better explanation, I would recommend reporting this as a bug in Safari.

user_14706070

To learn more and possibly find some clues, put an ID on the div and adjust your CSS accordingly. See if the result changes. This should not be needed, but playing around and trying things usually reveals some clue. Also, what happens if you move font-size:15px; to the div element (next to the width property) ? If these alternatives work, you can see them as a way to circumvent the fault.

user_9772410
Related