4

I have a container where I want to set its font-size so it reflects on its children.

I'm using the following to support font sizes for different screen sizes:

.hero {
    font-size: clamp(4px, 1vw, 10px);
}

The CSS above works fine for Google Chrome, but when I run my page on Safari (Safari 14 to be exact), the font size does not resize as I change the window's size. If I resize the window and then refresh the page, the font does resize, but it stays at that initial font size.

I have also tried running the min() / max() version of clamp() as so ...

.hero {
    font-size: max(4px, min(1vw, 10px));
}

But I still get the exact same issue. The font size is not resizing on Safari. I have tried replacing the px with reasonable pt values, but the issue still remains. I'm not sure if this issue was on Safari 13, but I recently updated to Safari 14.

Is this a known issue? Am I missing something? How can I solve this problem without having to use any JavaScript?

TylerH
  • 20,799
  • 66
  • 75
  • 101
RivasCVA
  • 91
  • 2
  • 8
  • Thanks for introducing me to the fact that CSS added `clamp()`... TIL – TylerH Sep 21 '20 at 14:32
  • Can you verify this code works in another browser like Chrome or Firefox? AFAICT this was added in Safari 13.1 so should be working in Safari 14. Perhaps 1vw is not between 4px and 10px? – TylerH Sep 21 '20 at 14:34
  • @TylerH The code works perfectly in Google Chrome, but not in Safari 14. Now that you mention, do you think Safari and Google Chrome treat 1vw differently? As in, if the windows are the exact same size, 1vw in Safari might be different than 1vw in Chrome? – RivasCVA Sep 22 '20 at 15:18
  • I would think their calculations are the same. I do know ~5 years ago, Safari had issues with viewport units in calc() (so would likely have issues with it in `clamp()`). Not sure if that bug is still around. – TylerH Sep 22 '20 at 16:37
  • I have the same issue with Safari `14.0.1`. Is there any solution yet? – Flo Ragossnig Nov 29 '20 at 13:45
  • @FlorianRagossnig I did not find any. I just stuck with using px's only or vw's only. – RivasCVA Nov 30 '20 at 21:27

1 Answers1

11

Apparently, Safari calculates clamp() incorrectly... Setting the min-height property does the job. I have changed the values of the original example, because it was so small that you could not see any effect:

.hero {
  min-height: 0vw;
  font-size: clamp(16px, 10vw, 32px);
}

and then:

<h1 class="hero">Hero Text</h1>

Here is a JSFiddle

Flo Ragossnig
  • 1,341
  • 14
  • 38
  • 1
    setting min-height makes it work in safari! Any caveats? – Nish Jan 25 '21 at 09:59
  • 1
    @nish if you're compiling scss and use min-height: 0vw; the vw unit will actually be lost, as 0 is the same in all units. Make sure to use 0.000001vw or something similar to keep the unit! – NoLoHo Feb 10 '21 at 14:20
  • The min-height answer above does work - but I also noticed that the clamp() function does work correctly on its own, but only on page load. Adding min-height allows it to flow on window resize, which is clearly the desired result, but just posting what I found :) – Kieran Metcalfe Apr 15 '21 at 13:26