| Summary: | CSS smart minimum font size breaks sites that use the "font-size: 6.25%" trick for 1:1 rem/px correspondence | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Saagar Jha <saagar> | ||||
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | ahmad.saleem792, mmaxfield, simon.fraser, webkit-bug-importer, zalan | ||||
| Priority: | P2 | Keywords: | BrowserCompat, InRadar | ||||
| Version: | Safari 16 | ||||||
| Hardware: | Mac (Apple Silicon) | ||||||
| OS: | macOS 13 | ||||||
| URL: | https://jsfiddle.net/amxwzuqe/show | ||||||
| Attachments: |
|
||||||
Created attachment 464435 [details]
A sample page that demonstrates the issue
This page renders differently on Safari versus Chrome/Firefox.
Changed attached test case to JSFiddle: https://jsfiddle.net/amxwzuqe/show ^ WebKit ToT (266624@main) pushes 'text' downward compared to Chrome Canary 117 and Firefox Nightly 118, which matches each other. |
Many sites use some variation of :root { font-size: 6.25%; } to get some semblance of 1:1 conversion between rem and px units, since most browsers will use 16px for the default font size. However, WebKit has a "smart minimum" (https://github.com/WebKit/WebKit/blob/7f27a00f1eb14a39e730336e96b639d852d322f3/Source/WebCore/style/StyleFontSizeFunctions.cpp#L53) font size that kicks in to try to avoid font sizes that are too small. Explicit pixel values (e.g. 1px) do not trigger this, but 6.25% (which presumably is supposed to scale with the user's accessibility settings) gets scaled up to 9px and this breaks those sites. Perhaps it would be worthwhile not triggering this behavior on the root element?