After uncovering an ancient piece of JS code that I had once shared for free use, I discovered that a CSS animation bug from 3 years ago is still causing trouble today.
The issue involves animating an element from left:100%/transform: translateX(100%) or top:100%/translateY(100%) to 0, essentially moving the element from off the right or bottom of its parent to the starting position.
While testing in Google Chrome on Mac OS X (47.0.2526.111), glitchy rendering keeps popping up as seen in this example: https://jsfiddle.net/lvl99/g29o0005/
The glitch causes the transitioning element to immediately jump to the origin position before moving off-screen and then jumping back again.
A solution I found previously was to adjust the 100% value to something like 92.5% for left/translateX values, but this didn't work for top/translateY values.
An interesting observation is that negative values animate smoothly, such as left:-100%/transform:translateX(-100%) and top:-100%/transform:translateY(-100%) (from off the top or left of the parent to the origin without any jumping).
Testing on Google Chrome for iPad and the latest Canary version showed improvement, while Firefox (43.0.4) and Safari (8.0.8) displayed mostly accurate rendering with some layering issues in 3D and card transitions. Could this be related to z-index or transform-style: preserve-3d?
Using an old MacBook Pro (Mid-2009) led me to wonder if the graphics card could be a factor. Has anyone else encountered similar rendering problems when animating off-screen elements? I've already included backface-visibility: hidden to address other rendering concerns.
Since Google Chrome Canary shows improvements, I remain hopeful for resolution in the regular Chrome build. However, for consistent rendering across browsers and older versions, finding a solution for non-jumpy animations would be advantageous.