1

問題を自分で確認したい場合は、ここにアクセスしてください。バグを複数回表示したい場合は、キャッシュを無効にする必要があります

次のようなウェブサイトがあります。 ウェブサイトはどのように見えるべきか

または、次のように表示され、最初にページをロードしたときを除いて、ほぼ毎回うまくレンダリングされます。

初めてロードしたときの Web サイトの外観

結局のところ、キャッシュなしで Web サイトをロードしようとすると (つまり、初めて)、 の背景が上部で切り取られますが、特定の要素の約半分に小さなパッチが表示されます。

問題の要素は絶対要素であり、親要素の後ろに配置されますが、正確に同じ位置と高さになるように JavaScript で調整されます。クラスは「ぼかし」と呼ばれ、これを行う理由は、要素の背後にあるすべてのものをぼかしますが、要素が含まれている同じ要素のコンテンツはぼかしません。次のように少し見えます。

<body>
    <div class="card">
        <div class="blur">
        </div>
        <div class="content">

.blur に関連付けられたスタイル:

.blur {
    position: absolute;
    z-index: -1;

    border-radius: 5px;
    background: url("mavericks.jpg");

    -webkit-filter: blur(5px);
    -webkit-backface-visibility: hidden;
}

-webkit-backface-visibiltiy: hidden をコメントアウトすると、問題はすぐに解決されます。ただし、背面を非表示にしないと、イントロのアニメーションが非常に遅くなります。さらに、ボディの背景はぼかし要素の背面部分ではないため、私が知る限り、非表示にするべきではありません。さらに奇妙なことに、この要素の高さまたは幅が 0 に設定されていても、レンダリングの問題は依然として残っています。

これはある種の webkit バグであると強く感じていますが、回避策を見つけるか、-webkit-backface-visibility の代わりを見つけるのを手伝ってくれる人がいれば、大いに感謝します。ウェブサイトのソースを自由に調べてみてください。Chrome 27.0.1453.116 および Safari 7.0 でテスト済み

4

0 に答える 0