Calc does not work on iOS 11.2.1 safari when using percent and pixels

Question

I have something as simple as a class

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

but elements with this class do not move at all. If I change it only by a percentage, it will work:

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

and this is not a minus or plus reason for adding and removing percentages, as well as adding and removing pixels works great:

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

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

This only happens after the last iOS update, so 11.2.1. I suppose this is a mistake, but I would like to solve it if the apple solves it forever. I'm not quite sure if I should enable it with js or have something simple, like backing up with only percentages and no calc.

Does anyone have any good ideas how to solve this?

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

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

Answer 1

: calc, , . , .

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

Answer 2

webkit, MDN

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