iOS Safari + CSS calc() + CSS过渡=即时崩溃

Question

当我尝试使用left: -webkit-calc(100% - 100px);时(假设left: 0;是初始状态)，它在iOS 6.0.1中工作得很好。但是当我用transition: left 1s linear;做同样的事情时，它会立即崩溃Safari，每一次。它是已知的bug还是我做错了什么?

它也不能在Safari 5中工作(没有反应)。但它可以在Firefox和Chrome中使用。

Answer 1

可以通过使用auto:

以外的任何属性初始化来解决这个问题。

.menu {
  left: 0;
  transition: left 1s linear;
}
.menu-open .menu {
  left: -webkit-calc(100% - 50px);
  left: calc(100% - 50px);
}

Answer 2

这个WebKit bug已经存在一段时间了。现在你可以使用JS来完成相同的结束效果。

Answer 3

迄今为止张贴的答案都不适合我。

工作是围绕calc语句使用负边距:

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

Answer 4

不幸的是，我不得不这样做来完成一个类似的任务:

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

Answer 5

也许可以这样做:

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

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

警告:未经考验的

Answer 6

我花了很多时间在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重叠。

Answer 7

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

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