Safari 9+ buggy with px/em/rem units

Not sure if newer version of Safari is supported but when I try the following it doesn't work as intended:

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?

[madeleineostoja]

I'd hazard a guess that it's something to do with codepen's environment. Does the title on https://simplaio.github.io/rucksack work for you?

[sebastiangraz]

I copied the exact css from Rucksack and applied to my project and its still buggy

The code can be found here:
https://github.com/umbriel/stupid-starter

[riccardoerra]

I confirm the weird behaviour in Safari, Safari 10.0.3 on macOS Sierra 10.12.3.

With the default parameters this is the output:

font-size: calc(12px + 9 * ((100vw - 420px) / 860))

[riccardoerra]

After a bit of research I found out that this issue has nothing to do with the plugin itself, just a Safari bug.

You can read more about it here: Viewport Unit Based Typography

TL;DR Safari needs percentages to work. Check this pen: Cross-browser fluid type

[madeleineostoja]

Argh. Safari is like the new IE.

Okay, I don't know how we'd fix this in a robust manner - percentage font-sizes are relative to their parent, like em. So you couldn't just sub out px and rem with percentage font-sizes in this plugin and expect it to work. Restraining the supported inputs of this plugin to percentages would be similarly limiting.

What I'd recommend, and I might add this to the README if no better solution presents itself, is to use % inputs with postcss-responsive-type to set a responsive base on the html element, and then use rem units throughout your codebase.

Hopefully this is filed as a bug against webkit somewhere, and isn't just a known difference in their implementation.

[riccardoerra]

I checked also in Safari Technology Preview latest: Release 26 (Safari 10.2, WebKit 12604.1.12). Same issue.

My solution at the end was building this formula. Maybe can help you in restructuring the plugin and make it work also in webkit.

[madeleineostoja]

But that would break as soon as you have a font-size defined anywhere up the tree? Ie: regardless what percentage that formula resolved to, it's still relative to its parent:

<div class="foo-one">

<div class="bar">
  <div class="foo-two"></div>
</div>

.foo-one, .foo-two {
 font-size: 100%
}

.bar {
  font-size: 20px
}

foo-one font-size = 16px
foo-two font-size = 20px

[madeleineostoja]

Anyway, there's also https://github.com/rodneyrehm/viewport-units-buggyfill, though haven't looked into it.

Also, I still can't get a consistent repro - we use postcss-responsive-type on simpla.io, and that works as expected for me in Safari 10.0.3 on Sierra.

[riccardoerra]

You are correct about breaking as soon as you have a font-size defined anywhere up the tree.
Need to update my pen.

Also I can definitely see it working on simpla.io. Let me investigate more.

[riccardoerra]

This is almost surreal.

So I analysed simpla.io and built a pen out of it.

As you can see something doesn't work. Only when you refresh the page you can see the font-size changing. Not really sure how they have it working on their website.