Reset css transitions in Internet Explorer 10

While trying CSS transitions, I created a small scrollable demo that takes the rightcss style from some negative number to 0, and then restarts when the event transitionendfires to get an infinitely scrollable effect. Here's the script with my demo - http://jsfiddle.net/XhFdv/

This works in the latest versions of FF, Chrome, Safari (win) and Opera. In IE 10 (tested on both Win 7 and Win 8), the event fires, but an attempt to set the correct property back to the negative number from which it starts does not work, it often remains 0 after installation (but not always).

To make things more interesting, add console.log()or alert()often enough to make it work as expected. This makes me think that there is something incomplete in the user interface layer. I tried to wrap more style settings in setTimeout(..., 0), so rendering might catch up, but that didn't help.

Is this a bug in IE 10, or is there something I can't see in the demo script?

+5
source share
1 answer

alert()works because it blocks script execution. As a secondary measure: something that causes redrawing or re-melting will be the next best:

  • Toggle visibility:hidden/visibleby changing class attribute
  • Toggle visibility:hidden/visibleby changing style attribute
  • CSSOM
  • display:none
  • offsetWidth offsetHeight
  • scroll
  • :hover

+1

All Articles