如果容器具有非整数(%)位置,则子位置与指定的位置不同

Question

我的中心是(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以确保滚动条可见.如果滚动条的宽度均匀,则可以通过将浏览器窗口的大小调整为奇​​数宽度来重现问题.

Answer 1

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

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

我在小提琴上测试了这个，它似乎可以解决问题。