Skip to content

Latest commit

 

History

History
53 lines (38 loc) · 4.51 KB

font-size-in-safari-only-supports-integers.md

File metadata and controls

53 lines (38 loc) · 4.51 KB
Raw

font-size in Safari only supports integers

Safari is evil. Unlike Chrome, it only allows integer pixel sizes for font-size and likely other CSS properties. In my case, this was an issue when a design used font-size: 12.5px. It worked in Chrome, but Safari interpreted it as font-size: 12px. (I am aware that relative units like em or rem are better for accessibility and mobile-friendliness. In this case, the design called for a very specific pixel dimension.)

Here's Safari's font-size changing abruptly:

Screen.Recording.2022-06-02.at.19.37.45.mov

Here's Chrome's font-size changing gradually:

Screen.Recording.2022-06-02.at.19.37.09.mov

You can check for yourself with these interactive demos:

History

Unfortunately, this seems to be a known issue on Safari and was reported as early as 2010. It also doesn't seem addressed in the MDN Docs for font-size.

  • https://bugs.webkit.org/show_bug.cgi?id=46987
  • https://bugs.webkit.org/show_bug.cgi?id=228545
  • Here are some quotes from a WebKit developer in those issues. I'm not sure what those mean or the reasoning behind this font-size limitation that goes against other major browsers.

    We purposely round the font sizes (to integer values) so that we get a higher hit rate in our various caches. > We round text sizes to integer values to increase cache hit rates.

    • I think this line of Safari's source code is responsible the strange behavior. 
      (unsigned computedPixelSize() const { return unsigned(m_computedSize + 0.5f); })

Attempted solutions

  • text-rendering: geometricPrecision; seems to only work for SVG text. See this interactive demo and MDN Docs.
  • -webkit-font-smoothing: antialiased; did not work.

    Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. (MDN Docs)

Additional reading about sub-pixel rendering

Some of these may be out of date, but they were interesting to read anyway.