Font-size calc dynamic size Safari failing

Question

Im using PostCSS responsive-type plugin and the generated code I get is as follows:

h1 {
 font-size: calc(28px + 20 * ((100vw - 320px) / 880));
}

http://codepen.io/umbriel/pen/WwLBxQ

Works fine in Firefox, Chrome and probably other modern browsers. But safari Version 9.0.3 fails entirely as evidenced in the Codepen I linked.

Does anyone have any ideas why this is?

edit: I may have found the culprit, it seems vw in conjunction with calc is the issue from what I tried. Is there a way of making it work?

And which of the parts of the expression fail? You can use simplified values to check if it's the calc function, the vw, the nested parentheses etc. — Mr Lister, May 06 '16 at 11:10
Use -webkit- prefix in your css font-size: -webkit-calc(28px + 20 * ((100vw - 320px) / 880)); — Farshid, May 06 '16 at 11:18
Possible duplicate of [Why doesn't the CSS calc() function work for me?](http://stackoverflow.com/questions/15108285/why-doesnt-the-css-calc-function-work-for-me) or [CSS calc not working in Safari and fallback](http://stackoverflow.com/questions/20443343/css-calc-not-working-in-safari-and-fallback) — Ani Menon, May 06 '16 at 11:34
@farshid -webkit prefix does not get recognised by the browser, either Chrome or Safari — umbriel, May 06 '16 at 12:42
@MrLister I reckon its vw in conjunction with calc is the issue from what I tried — umbriel, May 06 '16 at 12:45
@farshid According to [MDN](https://developer.mozilla.org/en/docs/Web/CSS/calc#Browser_compatibility), the -webkit- prefix wasn't needed after Safari 6. — Mr Lister, May 06 '16 at 12:49

score 11 · Answer 1 · answered Jan 27 '20 at 22:36

11

If anyone is looking at this in 2020 and feels kind of lost as Safari is still acting funky (especially when dealing with dynamic font sizing) have a look at this codepen

It's not mine but it solved the problem for me by using a

min-height: 0vw;

on the 'text class'. I ended up using it as a global so I don't need to bring in the class everywhere I want to use it.

Hope that helps.

answered Jan 27 '20 at 22:36

Damian

111
1
2

Thank you so much, literally took me forever to figure out what was going on.... – Shail Patel Sep 11 '20 at 16:50
Any idea why this is fixing it? – malte Nov 09 '20 at 07:42
1

@malte as far as I understand Safari needed a reference point to scale elements in older version. It seems fixed in the current one. They kinda 'locked' these values in on load and refused updating them if no height was set. It's the same with images in safari. If you don't set a width (even just on auto) Safari handles them differently from other browsers (squeezing them etc.) – Damian Nov 10 '20 at 08:35
FYI Sara Soueidan recently posted about this and included an alternative fix using `-webkit-marquee-increment: 0vw;`, which is only supported in Safari. https://www.sarasoueidan.com/blog/safari-fluid-typography-bug-fix/ – Ted Whitehead Apr 21 '21 at 14:26

score 2 · Answer 2 · edited May 23 '17 at 10:30

2

calc or vh/vw in calc may have issues in Safari and android browsers. This is a known issue and it was fixed in Safari 7+ but then there still are few issues reported.

-webkit-calc could be used as a fallback and it works fine in Safari.

Example fix for Safari :

sometag{
    width: 48%;
    width: -webkit-calc(50% - 20px);
    width: -moz-calc(50% - 20px);
    width: calc(50% - 20px);
}

Source : SO question : Why doesn't the CSS calc() function work for me?

Another old fix for your reference: using jQuery()

Refer :

edited May 23 '17 at 10:30

Community

1
1

answered May 06 '16 at 11:29

Ani Menon

27,209
16
105
126

Calc works fine in Safari, its Calc paired with VW thats troublesome – umbriel May 06 '16 at 12:53
Yes, `-webkit-calc` could fix it, then again if its an old Safari then the jQuery solution would be best. – Ani Menon May 06 '16 at 12:55

score 2 · Answer 3 · answered Dec 12 '16 at 13:42

I had the same problem in Safari 10.0.1 trying to combine vw & px units.

Using a % font-size value instead of px solved this for me. I'm assuming a base font size of 16px.

html {
  font-size: 16px;
}

h1 {
  font-size: calc(175% + 20 * ((100vw - 320px) / 880));
}

<h1>Responsive title in Safari 10</h1>

score 1 · Answer 4 · answered May 06 '16 at 11:24

1

The way I solved this problem, is introducing a pure CSS fall-back, that older browsers that don't support CSS calc would only read.

h1 {
 font-size: calc(28px + 20 * ((100vw - 320px) / 880));
 font-size: -webkit-calc(28px + 20 * ((100vw - 320px) / 880));
 font-size: -moz-calc(28px + 20 * ((100vw - 320px) / 880));
}

answered May 06 '16 at 11:24

Gaurav Aggarwal

9,809
6
36
74

As someone mentioned in the comments – I believe -webkit-calc doesnt get recognised by safari 6 and upwards – I just want it to work with the latest Safari which is 9 – umbriel May 06 '16 at 12:52

score 1 · Answer 5 · answered Aug 31 '20 at 22:01

Safari 13.1.1 seems to have an issue again with dynamic font-size (based on calculated viewport width) when resizing. So this would not work:

html {
font-size: calc(1em + 1vw)
}

A workaround I just found:

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

body {
font-size: calc(1em + 16px); /* 1vw = 1em here and 16px is the default browser value */ 
}

score 0 · Answer 6 · answered Jun 22 '21 at 14:01

0

Seems this has been fixed here:
https://bugs.webkit.org/show_bug.cgi?id=224614

Should be in a future version of Safari.

answered Jun 22 '21 at 14:01

j.j.

1,914
15
12

Font-size calc dynamic size Safari failing

6 Answers6

Linked