Steps to reproduce
Users should be aware that the requestAnimationFrame API demo at https://testdrive-archive.azurewebsites.net/Graphics/RequestAnimationFrame/Default.html (that shows two clock faces) does not always move the minute hand at the appropriate time (i.e., when the second hand reaches the ‘12’). The page draws the clocks with the second hand starting at the 12 position, and begins moving the sweep second hand from there. However, unless the page loads at the EXACT zero-second mark, the minute hand will tick to the next minute at a seemingly random second (based on the second-hand location). The problem is the script in the render functions in the Demo.js script file. The declaration:
var currTime = (new Date().getTime() - leftClock.startTime) / 1000;
should really be:
var currTime = (new Date().getTime()) / 1000;
Note that this error occurs in two separate places, as there are two different render functions.
The subtraction of the startTime causes the second hand to start at the ‘12’ (indicating zero seconds), but it puts the second hand out of sync with the point at which the minute is incremented.
Note that I have only found this happening in IE 11 and Edge, but it will almost certainly act the same way for ANY browser.
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Steven K.”
Changed Assigned To to “Scott L.”
Changed Status to “By design”
Hello - Thanks for filing this issue! Currently this demo has been archived and is not being updated at this time. I’ll resolve this bug.