Resetting css transitions in Internet Explorer 10

Question

In trying out CSS transitions I created a little scrolling demo that transitions the right css style from some negative number to 0 then restarts when the transitionend event fires to get an infinitely scrolling effect. Here's a Fiddle with my demo - http://jsfiddle.net/XhFdv/

This works in latest FF, Chrome, Safari (win), and Opera. In IE 10 (tested on both Win 7 and Win 8) the event fires, but trying to set the right property back to the negative number it starts at doesn't appear to be working - it often remains 0 after being set (but not always).

To make things more entertaining, adding console.log() or alert() is often enough to get it to run as expected. This is making me think there's something unfinished in the UI layer. I attempted to wrap more of the style settings in a setTimeout(..., 0) so rendering could catch up, but that didn't appear to help.

Is this a bug in IE 10, or is there something I'm missing in the demo script?

Answer 1

alert() works because it blocks script execution. As a secondary measure: something that triggers a repaint or reflow would be the next best thing:

• Toggle visibility:hidden/visible via a class attribute change
• Toggle visibility:hidden/visible via a style attribute change
• Adding a stylesheet via the CSSOM
• Hiding an element via display:none
• Calculating offsetWidth or offsetHeight
• Triggering a scroll event
• Triggering a :hover pseudo-class on the sibling of the element in question

References

• Onload in Onload

• Rendering: repaint, reflow/relayout, restyle

• JavaScript Performance Best Practices:Minimize the number of reflows and repaints

• Reflows & Repaints: CSS Performance making your JavaScript slow?

• Make the Web Faster: Minimizing browser reflow

• Reflow Timer Bookmarklet

• Reflow Selector Test Page