Question

在Safari（包括iOS设备）上进行了某种更新，这使得无法通过CSS函数calc()确定具有值的转换，这在以前的版本中得到了完美的覆盖。我知道有很多解决方法，例如计算javascript的值并直接将其赋予元素的样式，并且修复了问题，我已经完成了。

我主要担心的是这种变化的原因，CSS calc()功能对性能有害吗？或者这个功能是否有一个全新的webkit-annoying-one-liner语法？或者Safari只是轻弹手指？

这对我很有用，因为我一直在使用这种解决方案为一段时间内具有多种屏幕尺寸兼容性的混合应用程序制作动画。

以下是我遇到此问题的代码示例： 在我的 ionic v1 应用程序中，有以下元素：

<div class="stream-item" ng-class="stream.fullwidth ? 'full-width' : 'half-width'"></div>

这个元素有很多CSS规范，包括那些：

.stream-item {
  background-color: white;
  height: 100px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -webkit-transition: -webkit-transform all 0.3s ease-in-out;
}

.stream-item.full-width {
  width: calc(100% - 48px);
  width: -webkit-calc(100% - 48px);
}
.stream-item.half-width {
  width: calc((100% - 62px) / 2);
  width: -webkit-calc((100% - 62px) / 2);
}

使用AngularJS时，当用户点击某个按钮时，我正在切换属性stream.fullwidth。同样，这个解决方案在iOS和Android设备的所有先前版本上运行良好我在iOS 11更新后才开始遇到此问题。

重要提示 为了避免出现任何不相关的css层次结构问题，我使用固定值（例如 100％和 50％）测试了我的代码，并且动画效果很好再次。但每当我重新插入calc()函数时，它就会停止工作。

Safari 11+不支持使用CSS calc（）函数进行转换

0 个答案: