CSS transform transition layout flash in WebKit (possibly caused by layout caching?)

Question

I have been trying to use CSS transforms on a element to center an absolutely positioned image, so that I can transition position from center to left. This is the basic code (with vendor prefixes in all of the combinations) I have been using.

position: absolute;
left: 50%;
height: 100%;
transform: translateX(-50%);
transition: transform 1s, left 1s;

And then on hover, the following properties are changed.

left: 0;
transform: translateX(0%);

This all works perfectly, but the problem starts when the height of the wrapper also changes during transition. WebKit appears to cache the width of the element from what it was before while transitioning the element, and because the width/height change during transition, once it reaches the end of the transition, it jumps to where it belongs. Here is a JSFiddle that shows my problem. It works perfectly in Firefox and IE10, but WebKit based browsers Chrome, Safari, and Opera, have a layout flash at the end of the hover out.

JSFiddle Example

I have spent the past few days trying everything I could think of to trick WebKit into behaving correctly, from adding additional CSS properties, transitions, animations, and even triggering a reflow on the element using requestAnimationFrame and timers, but nothing seems to help. I would be very grateful to anyone who can offer a solution.

Answer 1

This was apparently a bug in the vendor-prefixed implementation of CSS transitions where it pre-computes the target and does not update it after a reflow. It's no longer resent in the un-prefixed version in newer versions of WebKit.