NEW 250927
iPhone: Inserting text causes other text to become bigger 
https://bugs.webkit.org/show_bug.cgi?id=250927
Summary iPhone: Inserting text causes other text to become bigger
Šime Vidas
Reported 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>
Attachments
Add attachment proposed patch, testcase, etc.
Šime Vidas
Comment 1 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
Karl Dubost
Comment 2 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.
Radar WebKit Bug Importer
Comment 3 2023-01-27 19:59:16 PST
<rdar://problem/104772244>
Note You need to log in before you can comment on or make changes to this bug.