iOS Safari + CSS calc() + CSS 转换 = Instant Crash

Posted 2023-03-06

【中文标题】iOS Safari + CSS calc() + CSS 转换 = Instant Crash

【英文标题】：iOS Safari + CSS calc() + CSS transition = Instant Crash

【发布时间】：2012-12-12 21:20:59

【问题描述】：

当我尝试使用left: -webkit-calc(100% - 100px);（假设left: 0; 是初始状态）时，它在ios 6.0.1 中运行良好。但是当我对transition: left 1s linear; 做同样的事情时，它每次都会立即使 Safari 崩溃。是已知的错误还是我做错了什么？

它在 Safari 5 中也不起作用（没有反应）。但它适用于 Firefox 和 Chrome。

【问题讨论】：

这显然是一个错误，请尝试报告它，请参阅 Ask Different 上的 How should I submit bug reports and feature requests?。

Safari 5 不支持计算，因此 Safari 移动版也不支持

Safari 6 已经支持 calc，但是当你将它与转换一起使用时它会崩溃。

伙计，我整个下午都在发现这个小虫子。谢谢你。

确认 @Atadj 所说的，当 -webkit-calc 与 CSS3 转换结合使用时，Safari 6.0.5（桌面）崩溃。

【参考方案1】：

到目前为止发布的所有答案都不适合我。

起作用的是使用负边距解决calc 语句：

#example 
  left: 100%;
  margin-left: -100px;

【参考方案2】：

您可以通过使用除 auto 之外的任何内容初始化属性来解决此问题：

.menu 
  left: 0;
  transition: left 1s linear;


.menu-open .menu 
  left: -webkit-calc(100% - 50px);
  left: calc(100% - 50px);

【讨论】：

仅供参考，目前这不适用于 iOS。看起来像一个移动 Safari 错误。

【参考方案3】：

把这个小测试放在一起，看看它是否会得到修复。目前它使 mac safari 6.0.5 和 iOS safari 崩溃。

http://jsbin.com/omexek/3/

【参考方案4】：

我花了很多时间在 Chrome 中测试我的响应式设计而不是 iOS 移动设计后遇到了同样的问题。有很多“弹性”元素，所以我想要一个至少在早期版本中可以涵盖所有这些元素的解决方案。

如果您正在使用纯 CSS 进行响应式设计，那么至少可以避免崩溃：

@media (max-device-width: 1024px) 

* 
  -webkit-transition: width 0, top .8s !important;
  -moz-transition: width 0, top .8s !important;
  -o-transition: width 0, top .8s !important;
  transition: width 0, top .8s !important;

我想保持顶部定位转换，所以必须这样做。

这个解决方案可能会更好，因为它会与使用 1024 显示器和 android 的人有一些重叠，但我确实使用 max-device-with 代替 max-width 避免与小窗口重叠。我假设 1024 位显示器用户可能没有使用现代浏览器，但希望修复 Android 重叠。

【参考方案5】：

也许做这样的事情：

.class
    left: -webkit-calc(100% - 100px);
    transition: margin-left 1s linear, right 1s linear;



.class.open 
    margin-left: -100%;
    right: 100px;

警告：未经测试

【讨论】：

我相信这正是导致崩溃的原因。

【参考方案6】：

不幸的是，我不得不这样做才能完成类似的任务：

$('.modal').css(
  'height': $(window).height() - 40
);

【参考方案7】：

这已经是 WebKit 的错误有一段时间了。现在你可以使用 JS 来完成同样的最终效果。