[Webkit-unassigned] [Bug 260880] New: Webkit does not respect rem units

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Tue Aug 29 15:05:16 PDT 2023


https://bugs.webkit.org/show_bug.cgi?id=260880

            Bug ID: 260880
           Summary: Webkit does not respect rem units
           Product: WebKit
           Version: Safari 17
          Hardware: All
                OS: All
            Status: NEW
          Severity: Critical
          Priority: P2
         Component: Accessibility
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: glads.logs0o at icloud.com
                CC: andresg_22 at apple.com,
                    webkit-bug-importer at group.apple.com

Context:

Operating systems regularly allow users to set a custom font size scale. This can be useful for users who have vision problems, for example. It is a best practice for software, including web pages, to respect this font size setting. In the browser, the way to accomplish this is with rem units. And in fact, all browsers except for Safari work this way.

To confirm this, you can create a webpage with the following CSS:

```
p {
  font-size: 1rem;
}
```

And create a paragraph element with text. On any OS and any browser (except Safari) you can open this webpage and then change your system-level font scale setting. Observe that the text in this paragraph will match the system-level scale value.

The problem:

Safari always renders `1rem` as `16px`.

A possible workaround:

Sources on the web suggest the following workaround:

```
html {
  font: -apple-system-body;
}
```

This does work to make Safari respect font size settings, but it introduces a new problem on macOS. It sets the "unscaled" value of 1rem to be 13px rather than the normal 16px. The consequence of this is that all text will display smaller on macOS.

Proposed solutions:

(1) The best solution for developers would be to update Safari so that it treats rem units the same as every other browser.
(2) A stop-gap solution would be a new webkit-only prefix that would *only* enable the dynamic font size, but not change the base font size value nor the font-family. Something like:

```
html {
  font-size: -apple-system-font-size;
}
```

(3) If the Webkit team thinks that Safari is actually treating rem units correctly and that everyone else is doing it wrong, then the web platform needs a new solution to respect the OS-level font scale setting.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230829/0549fc14/attachment.htm>


More information about the webkit-unassigned mailing list