0

今天我面临一个非常奇怪的问题。

我创建了一个包含大约 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）就会显示出来。

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

我建造了数千次这种滑块。这就是为什么这个问题让我如此困惑。

明天我回到办公室时，我会试着整理一个小提琴。但我希望有人可能有一个想法甚至解决方案。

编辑 2

这是小提琴。

我发现如果我从单个s中删除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;
4

1 回答 1

0

Safari 容易出现无法重新呈现动态内容的故障。我昨天在 CSS3 专栏中遇到了这个问题。

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

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

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

于 2013-02-27T14:15:05.827 回答