Bug 285264 – font-variant-caps: all-small-caps causes incorrect box-sizing in flex/inline context

• Component: Text
• Status: RESOLVED FIXED

[Christopher Kirk-Nielsen]

Created attachment 473723 [details]
Toggling the font-variation-caps rule showcases the element's box size does not change despite the smaller text occupying less space.

What happens is that the computed box for the text in small caps occupies the space of the standard text.
I am noticing this on page load on my website, but I need to trigger a repaint of sorts in this example CodePen (link below) by commenting out the `font-variation-caps` rule (see attachment).

CodePen demo: https://codepen.io/chriskirknielsen/pen/emOGyPj

Notes:
- Also happens on Safari on iOS 18.1.1
- This is only really a problem when alignment is obvious (so a block element outside a flex context is fine)
- Using `text-align: center` does not "fix" this issue
- While I think this might be related to bug #215693, this is not a broken rendering per se.

[Ahmad Saleem]

Created attachment 473726 [details]
WebKit ToT (Minibrowser)

I am unable to reproduce this as can be seen from image, is it iOS specific?

[Christopher Kirk-Nielsen]

This happens in Safari on macOS 15 and iOS 18.
In the provided CodePen, comment the line `font-variation-caps`, wait a moment, then uncomment the line. The issue should appear.
You could also try my website which consistently showcases the issue with the date above the title: https://chriskirknielsen.com/blog/2024-as-bullet-points/

[Ahmad Saleem]

Created attachment 473728 [details]
WebKit ToT vs Chrome Canary

Thanks! I am able to reproduce on live website. :-)

[Radar WebKit Bug Importer]

<rdar://problem/142212550>

[Karl Dubost]

Created attachment 473818 [details]
rendering in safari, firefox, chrome

In both Chrome and Safari, the text seems to be smaller. 
In Firefox it has a bigger size.

[Karl Dubost]

Created attachment 473819 [details]
rendering in safari, firefox, chrome (after manual zoom)

Also after applying manual zooming 6 times (aka Command +)
The text in safari stays the same size, while it grows in Firefox and Chrome

[Sammy Gill]

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

[Sammy Gill]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/50340

[EWS]

Committed 289486@main (62bec2852217): <https://commits.webkit.org/289486@main>

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