Bug 250350 - CSS smart minimum font size breaks sites that use the "font-size: 6.25%" trick for 1:1 rem/px correspondence
Summary: CSS smart minimum font size breaks sites that use the "font-size: 6.25%" tric...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 16
Hardware: Mac (Apple Silicon) macOS 13
: P2 Normal
Assignee: Nobody
URL: https://jsfiddle.net/amxwzuqe/show
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2023-01-09 18:01 PST by Saagar Jha
Modified: 2023-08-06 16:01 PDT (History)
5 users (show)

See Also:


Attachments
A sample page that demonstrates the issue (334 bytes, text/plain)
2023-01-09 18:03 PST, Saagar Jha
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Saagar Jha 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?
Comment 1 Saagar Jha 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.
Comment 2 Radar WebKit Bug Importer 2023-01-09 18:21:09 PST
<rdar://problem/104054971>
Comment 3 Ahmad Saleem 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.