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）就会显示出来。

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

我制作了这样的滑块数千次。这就是为什么这个问题让我很困惑的原因。

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

修改2

这是Fiddle。

如果我从单个perspective中删除perspective-origin 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和.morecontainer的透明div，这可能会强制在动画的每一步中重新渲染。

奇怪的JavaScript滚动/渲染问题

1 个答案: