Bug 250927

Summary: iPhone: Inserting text causes other text to become bigger
Product: WebKit Reporter: Šime Vidas <sime.vidas>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: brandonstewart, ik, karlcow, simon.fraser, webkit-bug-importer, wenson_hsieh
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: Unspecified   
OS: Unspecified   

Description Šime Vidas 2023-01-20 19:58:31 PST 
Steps to reproduce:

1. Use an iPhone
2. Open this page: https://output.jsbin.com/mojogas/quiet
3. Tap the “Insert text” button

What happened:

The text became larger. This only happens on iOS. This does not happen in Android browsers.

Full source code of linked test page:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test page</title>
    <style>
      .wrapper {
        display: grid;
        overflow-x: auto;
      }

      .wrapper > * {
        min-height: 1.35em;
      }
    </style>
  </head>
  <body>

    <div class="wrapper">
      <div>Test</div>
      <div id=elem></div>
      <img src="https://placekitten.com/640/320">
    </div>

    <p>
      <button onclick="elem.textContent = 'Test'">
        Insert text
      </button>
    </p>

  </body>
</html>
Comment 1 Šime Vidas 2023-01-20 20:19:24 PST 
Another thing I noticed is that if you restrict the width of the first two grid items (the ones that contain “Test”), the issue does not occur.

It seems that the issue has something to do with the grid items being very wide (in my case, 640px wide), although that doesn’t explain why the issue only occurs when there are more than one grid item with text.

Added CSS that makes the issue go away:

.wrapper > :not(:last-child) {
  width: 4ch;
}

Test page with added CSS: https://output.jsbin.com/rijariw/quiet
Comment 2 Karl Dubost 2023-01-22 18:05:59 PST 
Thanks a lot Šime.
I wonder if there is a WPT already covering this or if one is needed. 

The font size jumps from 16px to 23px.
After deactivating grid, the issue doesn't reproduce.

But as soon I reactivate grid, the font jumps to 23px again.

That looks like a bug indeed.
Comment 3 Radar WebKit Bug Importer 2023-01-27 19:59:16 PST 
<rdar://problem/104772244>