Bug 311188 – Identical buttons drawn differently with font: -apple-system-short-body

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Jeff Johnson]

Created attachment 478864 [details]
Sample HTML demonstrating the bug

This bug occurs on iOS 26.4 and iPadOS 26.4. The bug may be new, but I'm not certain about that.

When there are multiple buttons on the page, and they use font: -apple-system-short-body, then they can be drawn with different corner radiuses. See the attached sample HTML and screenshot.

If I remove the CSS font rule, the bug no longer occurs.

The sample HTML is adapted from my Safari extension popup window.

[Jeff Johnson]

Created attachment 478865 [details]
Screenshot on iPhone

[Radar WebKit Bug Importer]

<rdar://problem/173786057>

[Tim Horton]

I worked this one out. It has nothing /really/ to do with the font, it's about the logic in RenderThemeCocoa's shapeForButton that tries to make "squareish" buttons not draw a circle"ish" background (by dropping to a much lower corner radius). The reason that identical buttons can vary across the page is that it uses the pixel-snapped size to decide which path (pill or roundrect) to go down, and different positions on the screen can result in different sizes. It just so happens that the font in the testcase puts the button right on the boundary, and rounding can kick it either way.

I think the fix is to use the un-snapped size to decide which shape path to take.

[Tim Horton]

Created attachment 479707 [details]
variant of the testcase that jiggles as it moves across the screen

Adding a variant of the testcase that moves the buttons around and clearly shows them pop between the two paths as they move.

[Tim Horton]

Pull request: https://github.com/WebKit/WebKit/pull/65230

[EWS]

Committed 313535@main (8bf88660a664): <https://commits.webkit.org/313535@main>

Reviewed commits have been landed. Closing PR #65230 and removing active labels.