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>
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
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.
<rdar://problem/104772244>