1

私は非常に奇妙な問題を抱えています:

Web サイトでいくつかの製品を表示するために、次のような DIV 構造があります。

<div class="visible_frame"> //THIS FRAME HAS A FIXED SIZE AND OVERFLOW:HIDDEN
    <div class="wide_container>  //THIS CONTAINER IS AS WIDE AS ALL PAGES TOGETHER
        <div class="page">  //EACH PAGE IS FLOATED AND HIDDEN BEHIND THE FRAME
            <div class="product"> //EACH PRODUCT IS FLOATED INSIDE THE PAGE
                <div class="product_overlay"></div>
            </div>
            <div class="product">
                <div class="product_overlay"></div>
               //EACH OVERLAY IS HIDDEN INSIDE PRODUCT AND MOVES UP ON HOVER
            </div>
            <div class="product">
                <div class="product_overlay"></div>
            </div>
        </div>
        <div class="page">
            <div class="product">
                <div class="product_overlay"></div>
            </div>
            <div class="product">
                <div class="product_overlay"></div>
            </div>
            <div class="product">
                <div class="product_overlay"></div>
            </div>
        </div>
    </div>
</div>

まあ、あなたは約を見ることができます。私のコードのコピー。PRODUCT_OVERLAY を webkit-transform でアニメーション化するので、ホバー時に製品を完全にカバーします。何が起こるかというと、動きを開始するときとそれを終了するとき、ホバリングされた後のすべての製品が数ミリ秒間点滅します (消えて表示されます)。

さらに奇妙なことに、3 つ以上のページがある場合にのみ発生します (カルーセルのように、WIDE_CONTAINER を水平に移動してページを切り替えます)。

少し複雑な構造なので、たくさんのことが原因である可能性がありますが、製品がホバリングされた後にのみ発生し、1ページまたは2ページがある場合は決して発生しないという事実は、私が何かしていないものがあると思わせます.見る...

3ページのケースのJSFIDDLEは次のとおりです(問題が発生する場所):

http://jsfiddle.net/BVV24/1/

そして、ここに 2 ページの cas (HTML のみを変更し、1 ページを削除しました):

http://jsfiddle.net/BVV24/2/

ところで、これは Safari (Webkit) でのみ発生し、Google Chrome (Webkit) では発生しないことに気付きました...

前もって感謝します！

4

1 に答える 1

0

これは私の問題を解決しました

-webkit-backface-visibility: hidden;

また解決策

http://stackoverflow.com/questions/6332485/transformscale-causing-blinking-when-hovering
于 2013-01-22T04:23:05.903 に答える