web-dev-qa-db-ja.com

iOS Safari + CSS calc（）+ CSSトランジション=インスタントクラッシュ

left: -webkit-calc(100% - 100px);を使おうとすると（left: 0;が初期状態であると仮定して）、iOS6.0.1で問題なく動作します。しかし、transition: left 1s linear;で同じことをすると、毎回Safariが即座にクラッシュします。それは既知のバグですか、それとも私は何か間違ったことをしていますか？

また、Safari 5では機能しません（反応なし）。ただし、FirefoxとChromeでは機能します。

ioscsssafaricss-transitions
27
Atadj

これは、プロパティをauto以外で初期化することで修正できます。

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

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

これまでに投稿された回答はどれも私にはうまくいきませんでした。

何がうまくいったのかは、負のマージンを使用してcalcステートメントを回避することでした。

#example {
  left: 100%;
  margin-left: -100px;
}
2
Choylton B. Higginbottom

これはしばらくの間WebKitのバグでした。今のところ、JSを使用して同じ最終効果を達成できます。

2
Mooseman

残念ながら、同様のタスクを実行するためにこれを行う必要がありました。

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

おそらく次のようなことをします：

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


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

警告：テストされていません

0
Jim Hall

IOSモバイルではなくレスポンシブデザインをChromeでテストすることに多くの時間を費やした後、この同じ問題に遭遇しました。多くの「弾性」要素が配置されていたので、少なくとも初期のバージョンでは、それらすべてをカバーできるソリューションが必要でした。

純粋に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-widthの代わりにmax-device-withを使用しました小さなウィンドウと重なっています。 1024人のモニターユーザーが最新のブラウザーを使用していない可能性が高いと思いますが、Androidの重複を修正したいと思います。

0
Benjamin Watanabe

この小さなテストをまとめて、修正されるかどうかを確認します。現在、mac safari6.0.5とiOSsafariがクラッシュします。

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

0
twmulloy