2

It took me the whole day to find a workaround for a problem I just wonder why it is not more commonly discussed here. I am facing a problem with Safari 13.1.1. when try to resize the browser window. It just does not dynamically resize (based on calculated viewpoint width) the font-size as it should:

html {
font-size: calc(1em + 1vw);  /* not working when resizing */
}

My workaround works fine:

html {
font-size: 1vw;  /* initialise first without calc() */
}

body {
font-size: calc(1em + 16px);  /* now working fine when resizing */
}

As you can see you need to first initialise viewpoint width without calc(). The default font-size needs to be added in px. Now it works fine and the text resizes as it should when the window is resized.

My question: Why this strange behaviour? Any explanation? Or just a bug?

Ryan Lin Xiang
  • 101
  • 4
  • This CSS Tricks article is quite helpful in that regard (at least concerning `vh`): https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ – Anis R. Aug 31 '20 at 22:38
  • I have no Apple devices, so I can't test this, but this is my best guess: as `html` is the toplevel parent and `font-size: 1em` means '100% of the parent fontsize', maybe Safari considers `html { font-size: 1em }` (or used in a `calc()`, like you did) to be illegal as there is no parent. Try using `html { font-size: calc(1rem + 1vw) }`, because **1rem** uses either 100% of `:root` fontsize or when that is not defined, it takes the fontsize set in the browser preferences (on Windows anyway: Chrome/Edge: 'normal' and Firefox: 16px). This might be completely bogus, just try and and let me know. – Rene van der Lende Sep 01 '20 at 01:01
  • Hey Rene - I like your explanation and I also thought in that direction. Unfortunately, it does not work either. I guess that you just can't use vw in calc() at the top level. – Ryan Lin Xiang Sep 01 '20 at 07:42
  • I use this in my designs all the time: `html { font-size: calc(0.625vmin + 0.75rem) }` on Windows, IE11, Chrome/Edge and Firefox, even on Android 9+... A *Linear Equation (y=mx+b => 0.00625x + 12 using points p1(320,14) and p2(1280,20)* ), meaning *on a 320px viewport a fontsize of 14px* and *on a 1280px viewport a fontsize of 20px*. The `calc()` calculates all other fontsizes at all other viewports inbetween. Works like a charm, every time. – Rene van der Lende Sep 01 '20 at 22:06
  • @Rene: Yes, it works on all other browsers except Safari, which is what I am also developing for and which this topic is about. However, I reported the bug to Apple. – Ryan Lin Xiang Sep 02 '20 at 08:46
  • For my information (and others at SO): as well as Mac iOS Safari and iPhone? And did you try with **rem**? What does adding `!important` do? Using **em** on `html` really does make no sense, however, it should not yield an error or be ignored (which can be considered a bug). You said that one couldn't use `vw` either, have you tried `html { font-size: 16px + 1vw }`? This is perfectly legal (and should therefore work). If Apple is consistent, `html { font-size: 62.5% }` (1rem = 10px) should not work either: 62.5% of what? Final workaround: ignore `html`, use `body {font-size: calc(1rem + 1vw)}` – Rene van der Lende Sep 02 '20 at 12:59
  • Dear Rene - please just read my comment. I tried with rem and it does not work. It is a bug definitely. And also your workaround with `body {font-size: calc(1rem + 1vw)}` does not work. The `html {font-size:16px + 1vw}` is just nonsense because you need calc() here to add two values. The only thing which works is the workaround I suggested already. And it does make sense to use `em` on `html` because it would just use the browser default value (which is around 16px). Like I posted - I reported this Safari bug already to Apple and let's wait their feedback. – Ryan Lin Xiang Sep 03 '20 at 13:27
  • Please update your question when you get a reply from Safari, I'll bookmark the question and check back. Until then, use your workaround and success with the rest! – Rene van der Lende Sep 03 '20 at 15:32

3 Answers3

0

It looks like an old bug that was not solved. I'm currently having this bug in only some calc()'s in the page, not idea why. I'm using older macOS 10.11 and Safari 11.2, but since you're using version 13, if that's indeed the same bug, then it's not completely fixed. The workaround I've used was to set min-height:

#site-title {
    font-size: calc(1rem + 4.5vw);
    min-height: 0vw;
    (...)
}

References to similar bugs:

hdante
  • 7,685
  • 3
  • 31
  • 36
0

Sara Soueidan recently posted about this and included an alternative fix suggested by Martin Auswöger using -webkit-marquee-increment: 0vw;, which is only supported in Safari.

https://www.sarasoueidan.com/blog/safari-fluid-typography-bug-fix/

Ted Whitehead
  • 1,731
  • 10
  • 18
0

This seems to be fixed in WebKit recently, see
https://bugs.webkit.org/show_bug.cgi?id=224614

Don't know what Safari version this will be.

j.j.
  • 1,914
  • 15
  • 12