CSS calc not working in Safari and fallback

Question

I have this layout I am working on. It strongly depends on CSS calc to do the necessary calculations.

width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);

Now, I can't get this to work in Safari. Is there something I'm doing wrong?

And also, is there a way I can introduce a fall-back mechanism for browsers that don't support it? Percentage wont do a good job, since I have to subtract the object in the middle, from the two on the side.

Thanks.

An important note: Safari 3.1 to 5.1 doesn't support this web element. This property is partially supported with prefix -webkit- by Safari 6. Safari 6.1 to 11.1 supports this property. — Billu, Jan 01 '21 at 05:19

score 42 · Accepted Answer · answered Dec 08 '13 at 13:29

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.

Note: it is important to add fallback solution before calc solution. — Nizam Kazi, Oct 16 '15 at 10:10

score 2 · Answer 2 · edited May 23 '17 at 12:09

2

You're code looks fine, so I think the problem is browser compatibility. According to Mozilla Documentation, this feature works in Chrome, Firefox, and IE (the newer versions), but is nonexistent in Opera and is buggy in Safari. this question for more compatibility information. A much safer fallback/alternative would be to do your calculations in Javascript:

if ($(document).width() >= 750){
  $("#yourElementsID").css("width",$("#yourElementsID").width()*0.5-20)
} else if ($(document).width() >= 400){
  // do something here for smaller values
}

You can use the jQuery .width() function to detect the width of the document, then set the width of your elements accordingly. But just warning you, try to keep as many of your styles outside of your scripts and inside your stylesheets because otherwise it will be unmaintainable.

If it still doesn't work in some browsers, use Modernizr to detect the browser/version/OS and then redirect them to a different version of the page.

Edit 1: Added responsiveness
Edit 2: Removed Interval
Edit 3: Added mention of Modernizr

edited May 23 '17 at 12:09

Community

1
1

answered Dec 07 '13 at 16:20

hkk

2,069
1
23
48

This look promising, thanks. Though, how will I incorporate this JS with the responsiveness of the page. Is there any way I can target a CSS document or the @media tag? – Nikk Dec 07 '13 at 16:26
1

Sorry, I just realized I have the stupidest bug ever in my code- each time the interval executes, the width is halved, thus collapsing it pretty quickly. Try removing it, and it should work. – hkk Dec 07 '13 at 17:22
1

Okay. That solved the problem. But still doesn't work in Safari. Is there anything else wrong with it? Thanks. – Nikk Dec 07 '13 at 17:27
What version of Safari are you using? – hkk Dec 07 '13 at 17:29
Safari 5.1. On windows. – Nikk Dec 07 '13 at 17:31

CSS calc not working in Safari and fallback

2 Answers2

Linked

Related