Css calc is not working on Safari

Question

I have this css rule:

#SideBar{
height: calc(100vh, -82px);
overflow: auto;
/*Something more*/
}

The problem is that, in all the other browser like: IExplorer, Chrome, Opera, Firefox, but in Safari is not working this rule? Exist an alternative rule to set the height?

It's experimental anyway and you're not encouraged to use it yet. — j08691, Aug 08 '14 at 20:21

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

The proper syntax of CSS calc() function is -

`calc(expression)`

Where the expression can be built using +, -, * or / operators.
The comma , is not a valid operator to use inside calc(). Thus you are having an invalid property value of height inside the #SideBar.

Even you have to add space between operators and values.
You are having no space between - sign and 82px

So, your final code should looks like this -

#SideBar{
    height: calc(100vh - 82px);
    overflow: auto;
    /*Something more*/
}

Also safari still has some issue with viewport units, see here. You might want to use percentage value instead of viewport units. In this case the code will be -

#SideBar{
    height: calc(100% - 82px); /* Fallback for safari */
    height: calc(100vh - 82px); /* Supports for Chrome, FireFox, IE10+ */
    overflow: auto;
    /*Something more*/
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 08 '14 at 20:59

aniskhan001

7,981
8
36
57

1

The same problem in safari – Benjamin RD Aug 08 '14 at 21:12
Can you share a fiddle? – aniskhan001 Aug 08 '14 at 21:15
@MrMins Check my updated answer if it helps you out. – aniskhan001 Aug 27 '14 at 20:06

score 2 · Answer 2 · answered Aug 08 '14 at 20:30

2

Try without comma there or with -webkit-calc () prefix

answered Aug 08 '14 at 20:30

ondObno

91
5

Works if I dont use the 'vh' (in safari), but is possible use it with the vh? – Benjamin RD Aug 08 '14 at 21:13

Css calc is not working on Safari

2 Answers2

`calc(expression)`

Linked