Question

我有一个非常奇怪的问题：

我有一个像这样的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>

嗯，你可以看到一个aprox。我的代码副本。我使用webkit-transform为PRODUCT_OVERLAY设置动画，因此它在悬停时完全覆盖了产品。发生的事情是，只是在启动运动时，就在终止运动时，所有产品在被徘徊之后闪烁（消失并出现）几毫秒。

更奇怪的是，只有在我有3个或更多页面时才会发生这种情况（我会水平移动WIDE_CONTAINER来切换页面，就像在旋转木马中一样）。

我想这可能是由于大量的东西，因为它有点复杂的结构，但事实上它只发生在一个人徘徊之后的产品，而且从来没有1或2页让我觉得有些东西我看不到......

以下是3页案例的JSFIDDLE（问题发生的地方）：

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

这里有2页的cas（我只更改了HTML，删除了一页）：

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

顺便说一下，我刚才注意到这只发生在Safari（webkit）而不是谷歌Chrome（也是webkit）......

提前致谢！

Answer 1

这解决了我的问题

-webkit-backface-visibility: hidden;

同样解决方案

http://stackoverflow.com/questions/6332485/transformscale-causing-blinking-when-hovering

应用-webkit-transform时Div元素闪烁（仅转换后的元素）

1 个答案: