250927 2023-01-20 19:58:31 -0800 iPhone: Inserting text causes other text to become bigger 2023-01-27 19:59:16 -0800 1 1 1 Unclassified WebKit CSS Safari 16 Unspecified Unspecified NEW InRadar P2 Normal --- 1 sime.vidas webkit-unassigned brandonstewart ik karlcow simon.fraser webkit-bug-importer wenson_hsieh oldest_to_newest 1927067 0 sime.vidas 2023-01-20 19:58:31 -0800 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> 1927075 1 sime.vidas 2023-01-20 20:19:24 -0800 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 1927364 2 karlcow 2023-01-22 18:05:59 -0800 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. 1929117 3 webkit-bug-importer 2023-01-27 19:59:16 -0800 <rdar://problem/104772244>