Working around the viewport-based fluid typography bug in Safari

Sara digs into a bug I happened to have mentioned back in 2012 where fluid type didn’t resize when the browser window resized. Back then, it affected Chrome 20 and Safari 6, but the bug still persists today in Safari …


The post Working around the viewport-based fluid typography bug in Safari appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Sara digs into a bug I happened to have mentioned back in 2012 where fluid type didn’t resize when the browser window resized. Back then, it affected Chrome 20 and Safari 6, but the bug still persists today in Safari when a calc() involves viewport units.

Sara credits Martin Auswöger for a super weird and clever trick using -webkit-marquee-increment: 0vw; (here’s the documentation) to force Safari into the correct behavior. I’ll make a screencast just to document it:

I randomly happened to have Safari Technology Preview open, which at the moment is Safari 15, and I see the bug is fixed. So I wouldn’t rush out the door to implement this.

Direct Link to ArticlePermalink


The post Working around the viewport-based fluid typography bug in Safari appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.


Print Share Comment Cite Upload Translate
APA
Chris Coyier | Sciencx (2024-03-29T05:20:18+00:00) » Working around the viewport-based fluid typography bug in Safari. Retrieved from https://www.scien.cx/2021/06/28/working-around-the-viewport-based-fluid-typography-bug-in-safari-2/.
MLA
" » Working around the viewport-based fluid typography bug in Safari." Chris Coyier | Sciencx - Monday June 28, 2021, https://www.scien.cx/2021/06/28/working-around-the-viewport-based-fluid-typography-bug-in-safari-2/
HARVARD
Chris Coyier | Sciencx Monday June 28, 2021 » Working around the viewport-based fluid typography bug in Safari., viewed 2024-03-29T05:20:18+00:00,<https://www.scien.cx/2021/06/28/working-around-the-viewport-based-fluid-typography-bug-in-safari-2/>
VANCOUVER
Chris Coyier | Sciencx - » Working around the viewport-based fluid typography bug in Safari. [Internet]. [Accessed 2024-03-29T05:20:18+00:00]. Available from: https://www.scien.cx/2021/06/28/working-around-the-viewport-based-fluid-typography-bug-in-safari-2/
CHICAGO
" » Working around the viewport-based fluid typography bug in Safari." Chris Coyier | Sciencx - Accessed 2024-03-29T05:20:18+00:00. https://www.scien.cx/2021/06/28/working-around-the-viewport-based-fluid-typography-bug-in-safari-2/
IEEE
" » Working around the viewport-based fluid typography bug in Safari." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/06/28/working-around-the-viewport-based-fluid-typography-bug-in-safari-2/. [Accessed: 2024-03-29T05:20:18+00:00]
rf:citation
» Working around the viewport-based fluid typography bug in Safari | Chris Coyier | Sciencx | https://www.scien.cx/2021/06/28/working-around-the-viewport-based-fluid-typography-bug-in-safari-2/ | 2024-03-29T05:20:18+00:00
https://github.com/addpipe/simple-recorderjs-demo