iOS Safari + CSS calc（）+ CSS transition = Instant Crash
当我尝试使用left: -webkit-calc(100% - 100px); （假设left: 0;是初始状态）它适用于iOS 6.0.1就好了。 但是当我对transition: left 1s linear;做同样的事情时transition: left 1s linear; 它每次都会立即崩溃Safari。 它是已知的bug还是我做错了什么？
它在Safari 5中也不起作用（没有反应）。 但它适用于Firefox和Chrome。
您可以通过使用除auto之外的任何内容初始化属性来解决此问题：
.menu { left: 0; transition: left 1s linear; } .menu-open .menu { left: -webkit-calc(100% - 50px); left: calc(100% - 50px); }
这已经是WebKit的一段时间了。 现在您可以使用JS来完成相同的最终效果。
迄今为止发布的答案都没有对我有用。
使用负边距在calc语句中工作的是：
#example { left: 100%; margin-left: -100px; }
不幸的是，我必须这样做才能完成类似的任务：
$('.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移动设计后，我遇到了同样的问题。 有许多“弹性”元素到位，所以我想要一个能够涵盖所有这些元素的解决方案，至少在早期版本中。
如果你正在使用纯粹的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。