NEW292277
Some inline-block text appears at the wrong size on iPhone when there's a nearby button 
https://bugs.webkit.org/show_bug.cgi?id=292277
Summary Some inline-block text appears at the wrong size on iPhone when there's a nea...
Robert Bryer
Reported 2025-04-29 09:09:20 PDT
Created attachment 475078 [details] Middle lines showing as too big Using iPhone 13 / iOS 18.4.1 (but not on an iPad) Visit: http://smp-scratch.tools.bbc.co.uk/bob/safari-text.html All four lines of text are set to 24px. The middle lines are appearing larger than the top and bottom lines, even though they're set to the same font-size. The attached screenshot will show it best. Strangely the presence of the button at the bottom is a contingent cause. Removing that button causes it to render fine, as in this example here. http://smp-scratch.tools.bbc.co.uk/bob/safari-text-no-button.html I can't see this on an iPad on that's on 18.4.1, although that's possibly something about the screen size being different?
Attachments
Middle lines showing as too big (260.99 KB, image/png)
2025-04-29 09:09 PDT, Robert Bryer 		no flags
Details
Same page, but the button has been removed. (256.86 KB, image/png)
2025-04-29 09:10 PDT, Robert Bryer 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Robert Bryer
Comment 1 2025-04-29 09:10:23 PDT
Created attachment 475079 [details] Same page, but the button has been removed.
Radar WebKit Bug Importer
Comment 2 2025-05-06 09:10:28 PDT
<rdar://problem/150770485>
Simon Fraser (smfr)
Comment 3 2025-05-06 10:44:36 PDT
This is caused by text auto-sizing on iOS, which is heuristic-based and doesn't always do a great job. The author can fix it using the `-webkit-text-size-adjust` CSS property.
Note You need to log in before you can comment on or make changes to this bug.