Question

I have centered (position: absolute; left: 50%; margin: -50px;) 100px width div (container).

It has absolutely positioned child div with overflow: hidden, its size is 100x2000 px (such height is for test purposes, as described below).

There is an image in child div, it is absolutely positioned.
The image is 3100x100 px, it contains frames of animation.

I am animating this image by changing its style.left from 0 to -1100px, step is 100px.
Everything is fine, but I encounter weird issue when body width is not even.

It can happen if there is scrollbar and the scrollbar has odd width (it happens for me on Chrome/Win32 for example).
In this case image visually shifts by 1 pixel horizontally as soon as animated image goes through screen edge (for 1920×1080 it happens roughly at 9-10 frame of animation).
I can’t find workaround for this behavior.

Working example reproducing the problem can be found here

Child div height is set to 2000px to make sure scrollbar is visible.
If your scrollbar has even width, you can reproduce the problem by resizing your browser window to odd width.

Answer 1

To me this seems like a bug in Chrome. When percentages are defined in integers, they behave rather unexpectedly. Try to define the position as a decimal instead:

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

I tested this on the fiddle and it seems to do the trick.