6

3Dを使用せずにWebkitでCSSを使用して2D変換でハードウェアアクセラレーションを強制する方法はありますか（例translateZ(0)）（2D変換はモバイルSafariでハードウェアアクセラレーションされますか？）。

position: fixed要素がに相当するものに設定されているposition: absoluteため、ビューポートに対して配置されておらず、親コンテナに対して配置されているという問題を見つけています（この記事で説明されているようにhttp://meyerweb.com / eric / Thoughts / 2011/09/12 / un-fixing-fixed-elements-with-css-transforms /）。

このバグの概要https://github.com/jquery/jquery-mobile/issues/2856と同様に、iOSのトランジションでは背景が白くちらつく傾向があるため、ハードウェアアクセラレーションを選択しています。

4

2 に答える 2

1

2D変換値に加えて、3D変換値をnullに追加できます。

el {
    transform: 2DValue(val) 3DValueSetToNull(0);
    transform: 2DValue(val);
}

実際のCSSでは次のようなものを作成できます：

div {
    /* translateZ(0) will not interfere with the rotate value */
    /* Also with -webkit-, -moz-, -o- */
    transform: rotate(90deg) translateZ(0);
    /* Compatibility for older (yep) browsers */
    /* Also with -webkit-, -moz-, -ms-, -o- */
    transform: rotate(90deg);
}

2D変換値に干渉しない3D変換値を使用してください。

PS：3D変換値は次のとおりです：

  • translate3d（x、y、z）
  • translateZ（z）
  • scale3d（sx、sy、sz）
  • scaleZ（sz）
  • rotateX（角度）
  • rotateY（角度）
  • rotate3d（x、y、z、angle）、
  • パースペクティブ（p）
  • matrix3d（…）
于 2012-07-16T16:50:26.817 に答える
0

設定backface-visibility: hiddenがうまくいくようです。fps-counterを使用して、これをクロムでのみ確認しました。

.3d-accelerate {  
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

FPS カウンターは だけでは表示されませんtransition。を追加すると表示されtranslate: transform3d(0, 0, 0)ます。私もちょうどで現れbackface-visibilityます。

于 2014-02-18T13:58:50.687 に答える