Bug 250927
| Summary: | iPhone: Inserting text causes other text to become bigger | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Šime Vidas <sime.vidas> |
| Component: | CSS | Assignee: | 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 | ||
Šime Vidas
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
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
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
<rdar://problem/104772244>