使用百分比和像素时，Calc 在 iOS 11.2.1 safari 上无法运行

Question

我有一些像课程一样简单的东西

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

但此类的元素根本不会向左移动。如果我将其更改为仅百分比，它会起作用：

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

这不是减号或加号导致添加和删除百分比以及添加和删除像素工作正常：

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

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

这只发生在最新的 iOS 更新之后，即 11.2.1 。我认为这是一个错误，但我想解决它，以防苹果永远无法解决它。我不太确定我是否应该用 js 来解决它，或者有一些简单的东西，比如只有百分比而没有计算的后备。

有人有什么好主意如何解决这个问题吗？

如果您想自己测试一下，这里有一个小提琴手：

Answer 1

尝试使用 webkit 前缀，MDN

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