Question

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

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

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

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

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

可以找到重现问题的工作示例here

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

Answer 1

这是因为浏览器舍入引擎。 Webkit在偶数和奇数宽度上显然存在50%的一些问题。

克服此问题的一种方法 - 根据窗口宽度重新定位.outer元素

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

DEMO

Answer 2

您需要将.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>

Answer 3

对我而言，这似乎是Chrome中的一个错误。当百分比以整数定义时，它们的表现相当出乎意料。尝试将位置定义为十进制：

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

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

如果容器具有非整数（％）位置，则子位置与指定的位置不同

3 个答案: