requestAnimationFrame API demo does not move minute hand properly

By design Issue #13532369


James J.
Aug 31, 2017
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Users should be aware that the requestAnimationFrame API demo at (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.


0 attachments

    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.  

    You need to sign in to your Microsoft account to add a comment.

    Sign in