4

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

我主要关心的是这种变化的原因，CSScalc()功能对性能不利吗？或者这个函数有一个全新的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);
}

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

重要说明 为了避免出现任何不相关的 css 层次结构问题，我已经使用固定值（例如100%和50%）测试了我的代码，并且动画再次运行良好。但是每当我重新插入该calc()功能时，它就会停止工作。

4

0 回答 0