1

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

我有一个像这样的 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）中而不是谷歌浏览器（也是 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 回答