This content originally appeared on Bram.us and was authored by Bramus!
A common thing to do regarding font-sizing is to use Viewport Unit Based Typography, nowadays often combined with CSS min() or clamp():
:root {
font-size: min(calc(1em + 1vw), 4em);
}However, as Sara Soueidan details, Safari doesn’t co-operate here:
In Safari on macOS, the fluid text wasn’t really fluid—resizing the viewport did nothing to the font size, even though the latter is supposed to respond to the change in viewport width.
It’s a bug, slated to be fixed in the next version of Safari (Safari TP already has the fix). In the meantime there’s an easy workaround we can use.
More details + demo on Sara’s blog.
Working around the viewport-based fluid typography bug in Safari →
Re-reading that Viewport Unit Based Typography post from 2016 I now see that it also mentions that Safari doesn’t play nice with it. Let this underline the importance of filing bugs: because Sara filed a bug the Safari team came to know about the bug and fixed it (very fast too).
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2021-06-04T22:39:21+00:00) Viewport Unit Based Typography vs. Safari. Retrieved from https://www.scien.cx/2021/06/04/viewport-unit-based-typography-vs-safari/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.