javascript - 奇怪的 JavaScript 滚动/渲染问题

Question

今天我遇到了一个非常奇怪的问题。

我创建了一个包含大约 10 个复杂元素的 div。这些元素包含更多带有 CSS3 过渡、动画和翻译的 div。

外层的 div 很宽，在滚动容器中:

<div id="container">
    <div id="scroller">
        <div class="animated-element">
            [...]
        </div>
        <div class="animated-element">
            [...]
        </div>
        [...]
    </div>
</div>

我现在正在使用 jQuery(我也尝试过纯 JSS)在容器内移动滚动条:

document.getElementById('scroller').style.left = "-150px";
// or
$('#scroller').animate({"left" : "-150px"}, 500);

奇怪的事情正在发生。滚动元素后，没有任何变化。一开始我以为这是脚本中的错别字或其他内容。

但后来我将光标移到滚动条上，只要我来回移动它，我所做的更改(使用 JS)就会显示出来。

我搜索了很多关于重新渲染的内容，但找不到任何有用的东西。

我制作了数千次此类 slider 。这就是为什么这个问题让我如此困惑。

明天回到办公室后，我会试着组装一把 fiddle 。但我希望有人可能有想法甚至解决方案。

编辑2

这是 Fiddle .

我发现，如果我删除 perspective perspective-origin and position:relative 属性，滚动会起作用来自单个 .moreitem。在完整的上下文中，似乎有什么东西打断了。 无论如何，剪裁都有效。

编辑 1 这是滚动条的 CSS:

-webkit-box-align:center;
-webkit-box-orient:horizontal;
-webkit-box-pack:start;
display:-webkit-box;
height:100%;
position:absolute;

Answer 1

Safari 很容易出现不重新呈现动态内容的故障。我昨天在使用 CSS3 列时遇到了这个问题。

不确定这是否是您问题的核心，或者只是一个分散实际问题注意力的小故障，但请尝试在动画后强制重新渲染:

$('.morecontainer').toggle().toggle();

或者，作为动画的一部分，您可以使用 position:absolute 和 z-index:-1 移动(或以其他方式设置动画)透明 div位于 .morecontainer 下方，这可能会在动画的每个步骤中强制重新渲染。