iOS Safari+；CSS calc（）+；CSS转换=瞬间崩溃

当我尝试使用

left:-webkit-calc（100%-100px）（假设
left:0；
为初始状态）它在iOS 6.0.1中工作正常。但是当我对
转换做同样的操作时：左1s线性它每次都会立即使Safari崩溃。这是已知的bug还是我做错了什么

它在Safari 5中也不起作用（无反应）。但是它可以在Firefox和Chrome中使用。
这是WebKit的一个bug，已经有一段时间了。现在，您可以使用JS来完成相同的最终效果。
不幸的是，我不得不这样做来完成类似的任务：

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

或许可以这样做：

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


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

警告：未经测试
我花了很多时间在Chrome上测试了我的响应式（而非iOS mobile）设计后，遇到了同样的问题。有很多“弹性”元素，所以我想要一个解决方案，至少在早期版本中可以覆盖所有这些元素

如果您正在使用纯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重叠。
将这个小测试放在一起，看看它是否得到修复。目前它使mac safari 6.0.5和iOS safari崩溃

您可以通过使用除“自动”以外的任何选项初始化属性来解决此问题：

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

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

到目前为止，没有一个答案对我有效

所做的工作是围绕
calc
语句使用负边距：

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

这显然是一个bug，请尝试报告它，请参见Ask Different。Safari 5不支持calc，因此Safari mobile不会支持calc。Safari 6已经支持calc，但当您将其与transition一起使用时，它会崩溃。伙计，我整个下午都在发现这个小bug。谢谢。确认@Atadj所说的，当-webkit calc与CSS3转换一起使用时，Safari 6.0.5（桌面）崩溃。我相信这正是导致崩溃的原因。仅供参考，这目前在iOS上不起作用。看起来像一个移动狩猎虫。