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?

score 7 · Answer 1 · edited Mar 12 '15 at 00:55

7

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.

edited Mar 12 '15 at 00:55

Nic

12,220
20
77
105

answered Mar 12 '15 at 00:28

DragonKnight

1,740
2
22
35

1

This fixes the bug on Safari 7.1.8, glad to came across this answer. – Arno Tenkink Oct 19 '15 at 20:18

score 4 · Accepted Answer · edited Aug 31 '15 at 13:33

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.

score 2 · Answer 3 · edited May 23 '17 at 11:46

2

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

See this SO answer for a workaround.

edited May 23 '17 at 11:46

Community

1
1

answered Aug 27 '14 at 00:03

Evan Mulawski

54,662
15
117
144

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

3 Answers3