SkizGailale
New Member
I got something like following which is a CSS animation that cross-fades between two images:HTML\[code\] <div id="bg"> <img src="http://stackoverflow.com/questions/15627732/bg_01.jpg"> <img src="http://stackoverflow.com/questions/15627732/bg_02.jpg"> </div>\[/code\]CSS\[code\] body { background: black; overflow-y: hidden; } #bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } img { width: 100%; position: fixed; top: 0; left: 0; } img:last-child { -webkit-animation: test 30s infinite alternate; } @-webkit-keyframes test { from { opacity: 1; } to { opacity: 0; } }\[/code\]And there is a JavaScript snippet like this that toggles the animation on and off periodically:JavaScript\[code\] var state = 'running'; setInterval(function() { $('img:last-child').css({ '-webkit-animation-play-state': state }); state === 'running' ? state = 'paused' : state = 'running'; }, 1000);\[/code\]The problem is, there is a chance that some display glitch will show up when the animation is resumed ('paused' -> 'running'), and the chance varies depending on the kind of devices you are running the page against.If you are running the page on some cutting edge machine, things just look pretty smooth; however, if you switch to another browser tab, then switch back, there is a chance that you'll see your animation very obviously jumping back from the middle of the animation to the first frame (that img:last-child's opacity suddenly goes back to 1) and start anew.On the other hand if you are running against a weak device, you can see the glitch without switching browser tabs: almost every time the animation resumes, there will be a flickering moment when img:last-child's opacity is briefly set to 1 and visually "emerged", before the animation can pick up from its last proper state and continue.Is this simply a WebKit bug with nothing I can do to avoid, or is there some tricky way to tweak my codes so that this annoying flickering of the initial frame can be dealt with?