CSS Calc Not Working in Safari and Fallback

CSS calc not working in Safari and fallback

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.

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

The left and right panels, get a width of 48% if the browser cannot read the calc values.

figure.logo {   
    min-width: 40px;
    width: 4%;
    width: -webkit-calc(40px);
    width: -moz-calc(40px);
    width: calc(40px);
}

And the logo, which sits in-between the two panels, gets a width of 4%. And also a minimum width of 40px. And if the calc values can be read by the browser, they are 40px.

Css calc is not working on Safari

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*/
}

Calc in calc not working in safari

Your nested calc() is unnecessary. Works fine if you remove that.

height: calc(75vh - 110px);

html,body {  height: 100vh;}div {  background: red;  height: calc(75vh - 110px);}

<div></div>

calc() in Safari for left

As Hashem said, it doesn't work in earlier versions of safari.

http://caniuse.com/calc

However if you just want to center the div, a couple ideas come to mind.

One, you could give the container a

margin-right: auto;
margin-left: auto;
width: 50%;

Or make the width whatever you like.

Second, you could give the parent div

text-align:center;

Make the child div

display: inline-block;

and/or set a width for the child div.

safari calc() left issues

Safari seems to have a problem with " transition: all ".

The solution was to specifically adress the right transition-property.

Instead of

-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;

I now used

-webkit-transition: transform 0.7s;
-moz-transition: transform 0.7s;
-ms-transition: transform 0.7s;
-o-transition: transform 0.7s;
transition: transform 0.7s;

and everything goes fine.

---

Related Topics