Skip to main content

Safari’s <details>/<summary> rem font-size issue

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.

Demo

With the Safari (i.e. 10.1/11.1, Tech Preview 37) browser visit:

Screenshot of Demo 2 showing a summary element and very small text after it on the body content

The issue

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 <details> and <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.

The solution

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 <details>/<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 <details>/<summary> elements with <div> elements and aria-attributes to ensure that the component works as expected.

Additional notes

This issue has also been discovered, confirmed and demoed by Harry Roberts. Thanks for independently verifying the bug!


Want to read more articles like this? Subscribe to the category Engineering or the feed for all our articles.