0

SafariとChrome（モバイル/デスクトップ）で奇妙な問題が発生しています。webkit-transform：translate3dにグローバルスタイルを適用すると、スタイルに設定されたdivの背景色と100％の高さが機能しなくなります。さらに、top：0pxとbottom：0pxの設定も失敗します。グローバルな-webkit-transformスタイルを削除すると、すべてが期待どおりに機能します。何か案は？

    *
    {
        -webkit-user-select: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        margin:0px;
        -webkit-transform:translate3d(0,0,0);

    }

完全なサンプル

<!DOCTYPE HTML>
<html>
<head>
    <title>Sample</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

     <style type="text/css">
        *
        {
            -webkit-user-select: none;
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
            margin:0px;
            -webkit-transform:translate3d(0,0,0);

        }
        body {
        height:100%;
        }

    </style>


</head>
<body >

   <div id="myDiv" style="position:absolute;top:0px;left:0px;width:320px;height:100%;bottom:0px;display:block;background:black;color:black;border:1px solid black;">
            adsfasdf
    </div>

</body>
</html>
4

2 に答える 2

2

以下を使用してみてください。

.hwa {
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform-style: flat;
}

divのみ。

<div class="hwa"></div>

このようにして、レイヤーを合成してGPUを作成する前に、多くのCPUを使用する子孫セレクターについて心配する必要はありません。GPUアクセラレーションは、標準のCPUアニメーションの4倍のメモリを使用することに注意してください（リフロー/再計算/ペイント）

また、ブラウザをできる限り支援する必要があります。これは、GPUが引き継ぐ前に複合レイヤーを構築する方法を理解するために多くのCPUが必要になるため、幅：100％、高さ：100％を控えめに使用することを意味します。 。

于 2012-12-11T06:20:44.787 に答える
1

いずれにせよ、すべてに変換を適用したい理由がわかりません（おそらく、GPUを起動させたいですか？）、htmlの変換がこれを引き起こしています。あなたはそれを簡単に解決することができます：

*:not(html)
    {
        -webkit-user-select: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        margin:0px;
        -webkit-transform:translate3d(0,0,0);

    }

http://jsfiddle.net/Wv5Mx/を参照してください

于 2011-04-05T23:26:02.273 に答える