Calc is not working on iOS 11.2.1 safari when using percentage and pixels

Question

I have something as simple as a class

.left {
  left: calc(50% - 200px);
}

but elements with this class don't move left at all. If I change it to only percentage it works:

.left {
  left: calc(50%);
}

and it is not the minus or plus cause adding and removing percentages as well as adding and removing pixels works fine:

.left {
  left: calc(50% - 20%);
}

.left{
  left: calc(300px - 200px);
}

This is only happening after the latest iOS update, so 11.2.1 . I suppose this is a bug but I would like to solve it in case apple takes forever to solve it. I'm not quite sure if I should solve it with js or have something as simple as a fallback with only percentages and no calc.

Anybody have any good ideas how to solve this?

Here is a fiddler in case you want to test it out yourself:

https://jsfiddle.net/zk5wt3de/1/

Answer 1

I had the same problem: percentage in calc doesn't seem to be working. By setting width and max-width i was able to get the correct size.

  width: 100%;
  max-width: calc(100% - 62px);

Answer 2

Try with webkit prefix, MDN

-webkit-calc(50% - 200px);
-moz-calc(50% - 200px);
 calc(50% - 200px);