27

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

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

4

7 回答 7

4

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

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

.menu-open .menu {
  left: -webkit-calc(100% - 50px);
  left: calc(100% - 50px);
}
于 2014-05-21T10:31:55.753 回答
2

一段时间以来，这一直是 WebKit 的错误。现在您可以使用 JS 来完成相同的最终效果。

于 2013-02-08T23:18:18.830 回答
2

到目前为止发布的答案都没有对我有用。

起作用的是calc使用负边距解决声明：

#example {
  left: 100%;
  margin-left: -100px;
}
于 2015-04-28T23:44:10.797 回答
0

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

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

于 2013-07-27T23:05:59.257 回答
0

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

于 2013-05-28T02:42:33.597 回答
0

也许做这样的事情：

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


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

警告：未经测试

于 2013-05-10T22:11:09.680 回答
0

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

$('.modal').css({
  'height': $(window).height() - 40
});
于 2013-03-05T13:43:14.537 回答