4
レスポンシブルサイトでCSS3トランジションを使用しようとしていますが、デスクトップのChromeとAndroidのChromeで完全に機能していますが、両方のデバイスで正しく動作しませんクロムとサファリ。CSS3移行が遅い/動作しない
私は私のメニューのために使用していCSSスニペット、例えば、以下の通りです：
#menu {
width: 180px;
height: 100%;
position: fixed;
top: 0;
left: -180px;
z-index: 9;
transition: left 1s;
-webkit-transition: left 1s;
}
私は、クリックされたときに「左」のスタイルを変更するJavaScript関数を呼び出すメニューボタンを持っています0であり、画面の左側から外側に移動します。
デスクトップとChromeのAndroidではすべてうまく動作しますが、ChromeとSafariでは非常に不安定になるか、ちょっと遅れて瞬時にポップアップします。私のトランジションのすべてでこれをやっていますが、私は簡単にメニュー1を表示しています。
私はスタックを介しグーグルと検索の多くを行っているが、私は実際に見つけた唯一のものは、以下を追加すると言う：
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
スタイルにハードウェアアクセラレーションを強制するが、それはどちらか動作していないです。私は全く変化は見ません。どんな助けもありがとう。
回避を
transform: translateX(0)を使ってみて、それが変換 '使用してみてください代わりに、リソースの多くを取る：移動X（0）'水平調整のため – Swordys@Swordys私は小切手を差し上げます。なぜなら、私は最近まで、特にモバイル用ではなく、トランジションを実際に試みていないからです。私はまた、不安定さと同じ問題を抱えています/配置を変更しない要素には作用しませんが、最大高さと不透明度の遷移があります。それらのすべてにtransformを使うのが一番ですか？ – Jetteh22
はい、アブソリュート要素に多くのトランジションを使用している場合は、パフォーマンスに大きな影響を与えます。遷移を使用することは、スムーズな経験のためのベストプラクティスです。 'will-change：transform'を使ってハードウェアアクセラレーションを強制することもできますが、現在はSafariブラウザではサポートされていません。 – Swordys