Current Safari versions have weird issues with the
rem unit that can be hard to debug. For reference, we write about weird font-sizing in Safari when using a
<details> element on a website.
This blog article is about WebKit Bug 173876.
When we first discovered an issue in Safari on some of our pages, we had no clue where to start debugging it Parts of our website had extremely small font-sizes but when opening the Developer tools the issue disappeared.
With the Safari (i.e. 10.1/11.1, Tech Preview 37) browser visit:
As it turns out, the issue is indeed due to
rem unit values used with the
font-size property. But here is the thing: This only happens if you have at least one
<summary> element on your site. So Safari actually has a rendering bug here that renders text with font-size set in
rem extremely small.
The issue is hard to reproduce because once you open Developer tools it most of the time disappears and renders correctly again. Funnily, triggering a resize event also fixes the issue. Not all the time, just sometimes.
Well, unfortunately, currently there is no real solution available. Triggering a resize event is unreliable and completely useless for most users.
The only thing you can do is not using
<summary> elements at all for the time being until the bug is fixed. It’s not great, but seems to be the only way to render the rest of a page correctly.
Of course you could also replace all
rem font-sizes with other units, but it’s probably more effort.
Here at Colloq we ended up replacing the native HTML5
<summary> elements with
<div> elements and
aria-attributes to ensure that the component works as expected.
This issue has also been discovered, confirmed and demoed by Harry Roberts. Thanks for independently verifying the bug!