Synchronizing transform transitions on multiple elements
<p>I am using a slider plugin (<a href="http://roundsliderui.com/" rel="nofollow">http://roundsliderui.com/</a>) and added additional elements to have a custom fill image. In Chrome, the transitions that happen when the slider is clicked are not synchronized even though the settings are the same. It only seems to happen in Chrome, and is worse on mobile. I am targeting Android with the Crosswalk webview, so it will affect all users, especially slower phones.</p>

<p>The plugin has one element that rotates the handle, and I add one child to clip the fill image (<code>.rs-range-clip-custom</code>, no transform) with a child that rotates back to vertical to hold the fill image as a background (<code>.rs-range-custom</code>). It is very noticeable for the actual images, since the fill will either leave a gap at the end or extend past the end of the track depending on the direction it is moving.</p>

<pre><code>.rs-animation .rs-transition {/* plugin css */
    transition: all .5s linear 0s;
}
.rs-animation .rs-range-custom {/* my css */
    transition: transform 0.5s linear;
}
</code></pre>

<p>You can view a simplified version of the slider at <a href="http://codepen.io/MalikDrako/pen/XjbaWR" rel="nofollow">http://codepen.io/MalikDrako/pen/XjbaWR</a></p>

<p>How can I ensure the two animations are synchronized?</p>