4

私は次のスタイルを多くの要素に適用するフレームワーク ( Sencha Touch ) を使用しています。これは、おそらくモバイル デバイスでそれらを高速化するためです。

-webkit-transform: translate3d(0px, 0px, 0px);

通常、これは要素の表示方法を変更しません。しかし、要素にこのスタイルがある場合、隣接する要素のドロップ シャドウ フィルターに影響することに気付きました。この例(Mac の場合は Chrome、iOS の場合は Safari を使用) では、下の上部の画像は translate3d 要素の横にありますが、下部の画像はそうではありません。

三角形

誰かがこれがなぜなのか、それを回避する方法があるかどうかを説明できますか? 影のある要素にも z-index がある場合にのみ発生するようです。しかし、z-index を保持する必要があります。

ソースは次のとおりです。

<style>
.top {
    position: absolute;
    z-index: 1;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid blue;
    -webkit-filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.75));
}
.bottom {
    height: 80px;
}
.translated {
    -webkit-transform: translate3d(0px, 0px, 0px);
}
</style>

<div class="top"></div>
<div class="bottom translated"></div>
4

1 に答える 1

2

GPU と CPU でレンダリングされた要素を混在させると、いくつかの小さな問題が発生します。(translate3d を指定すると、レンダリング エンジンに GPU を使用する正当な理由が与えられます。それが GPU が使用される理由です) しばらく前に、Canary で GPU レンダリングを有効または無効にすることができました。ただし、フィドルを使用すると、Canary はどのモードでも問題なく表示されます。(27.0.1447.0)

安定した結果を得る唯一の方法は、ほとんどの表示を GPU で行うことだと思います。例えば：

.top {
    position: absolute;
    z-index: 1;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid blue;
    -webkit-filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.75));
}
.bottom {
    height: 80px;
}
div {
    -webkit-transform: translate3d(0px, 0px, 0px);
}

更新されたフィドル

crude, I know, but you get the idea.
于 2013-03-20T19:18:16.040 に答える