6

我将(position: absolute; left: 50%; margin: -50px;)100px 宽度的 div （容器）居中。

它具有绝对定位的子 div overflow: hidden，其大小为100x2000 px（此高度用于测试目的，如下所述）。

子 div 中有一个图像，它是绝对定位的。图像是3100x100 px,它包含动画帧。

我通过将其style.left从 0 更改为 -1100px 来设置此图像的动画，步长为 100px。一切都很好，但是当身体宽度不均匀时我遇到了奇怪的问题。

如果有滚动条并且滚动条具有奇数宽度，则可能会发生这种情况（例如，在 Chrome/Win32 上发生这种情况）。在这种情况下，只要动画图像通过屏幕边缘，图像就会在视觉上水平移动 1 个像素（对于 1920x1080，它大约发生在动画的 9-10 帧处）。我找不到这种行为的解决方法。

可以在此处找到重现问题的工作示例

子 div 高度设置为 2000px 以确保滚动条可见。如果您的滚动条的宽度是偶数，您可以通过将浏览器窗口调整为奇数宽度来重现该问题。

4

3 回答 3

3

发生这种情况是因为浏览器的舍入引擎。50%Webkit 显然在偶数和奇数宽度方面存在一些问题。

.outer解决该问题的一种方法 -根据窗口宽度重新定位元素

document.getElementById( 'outer' ).style.left = Math.floor( window.innerWidth / 2 ) + 'px';

演示

于 2012-11-24T12:19:32.023 回答
1

您需要更改.inner img position并relative更新您的 javascript。我为您进行了更改，所以这是您解决的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <style>
            body {
                background-color: #000000;
            }
            .outer {
                position: absolute;
                left: 50%;
                margin-left: -50px;
            }
            .inner {
                position: absolute;
                width: 100px;
                height: 2000px;
                overflow: hidden;
            }
            .inner img {
                position: relative;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner">
                <img src="http://lorgame.ru/test.png" id="img">
            </div>
        </div>
        <script language="JavaScript">
            var framesCount = 30;
            var framesCurrent = 0;
            var framesMoveLeft = true;
            var img = document.getElementById('img');
            var interval = setInterval(function() {
                if(framesMoveLeft == true){
                  framesCurrent++;
                  img.style.left = (img.offsetLeft - 100) + 'px';
                  if(framesCurrent == framesCount) framesMoveLeft = false;
                } else { // Move right
                  framesCurrent--;
                  img.style.left = (img.offsetLeft + 100) + 'px';
                  if(framesCurrent == 0) framesMoveLeft = true;
                }
            }, 100);
        </script>
    </body>
</html>
于 2012-11-24T11:44:15.203 回答
0

对我来说，这似乎是 Chrome 中的一个错误。当百分比以整数定义时，它们的行为相当出乎意料。尝试将位置定义为小数：

.outer {
    position: absolute;
    left: 49.99999%;
    margin-left: -50px;
}

我在小提琴上对此进行了测试，它似乎可以解决问题。

于 2012-11-24T12:25:26.993 回答