Bug 292277

Summary: Some inline-block text appears at the wrong size on iPhone when there's a nearby button
Product: WebKit Reporter: Robert Bryer <robert.bryer>
Component: TextAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ap, fantasai.bugs, simon.fraser, vitor.roriz, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 18   
Hardware: iPhone / iPad   
OS: iOS 18   
URL: http://smp-scratch.tools.bbc.co.uk/bob/safari-text.html
See Also: https://bugs.webkit.org/show_bug.cgi?id=304640
Attachments:
Description Flags
Middle lines showing as too big
none
Same page, but the button has been removed. none

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.