Safari + CSS: using "calc" with "vh" does not work

Question

I'm encountering a very niche issue CSS issue on Safari.

I have the following CSS rule:

min-height: calc(100vh - 115.5px - 25px*2);

This works on Chrome, but Safari doesn't seem to like the combination of calc and vh. (It works if I replace vh with %, for example--but I do need to calculate based on vh or some appropriate alternative.)

Is there some way around this to make this work? Alternatively, is there another way to refer to vh that is calc-friendly on Safari?

Solution 1

Safari seems to be kind of buggy with viewport units in general, especially if you go back a version or two. The last time I tried to use vh/vw, I ran into similar issues and ended up making use of the v-unit javascript micro-lib, and it worked out very well.

CSS is rapidly catching up to javascript for things like layout calculations, but when it gets complex, supplementing your css with some light scripting often works better than CSS alone.

Solution 2

before you use vw or vh, you should define:

html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
}

and make sure you use spaces between + and - as you did.

Solution 3

This is a known bug - also reported on caniuse (under Known Issues).

See this SO answer for a workaround.