Bug 250350

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: CSSAssignee: 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:
Description Flags
A sample page that demonstrates the issue none

Saagar Jha
Reported 2023-01-09 18:01:36 PST
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?
Attachments
A sample page that demonstrates the issue (334 bytes, text/plain)
2023-01-09 18:03 PST, Saagar Jha
no flags
Saagar Jha
Comment 1 2023-01-09 18:03:42 PST
Created attachment 464435 [details] A sample page that demonstrates the issue This page renders differently on Safari versus Chrome/Firefox.
Radar WebKit Bug Importer
Comment 2 2023-01-09 18:21:09 PST
Ahmad Saleem
Comment 3 2023-08-06 16:01:21 PDT
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.
Note You need to log in before you can comment on or make changes to this bug.