The effect of web browser "Input Lag" in HTML5 games


Game Play: Move the mouse cursor (a crosshair) to aim your 'laser'. You must hit the center void of the asteroid several times (in a short period of time) before it explodes (no need to click). You then advance to the next level, where the asteroids move faster. The sole purpose of this very simplistic 'game' is to clearly show you the effect of web browser (mouse) input lag in HTML5 games.

Show hardware cursor
Show software cursor
Show laser
The problem: The faster you move the cursor, the more that 'input lag' (how much time elapses from a mouse move, until the effects of that mouse move appears on the screen) will affect your game play. Notice what happens when laser lines to the cursor location are turned on and compare the hardware cursor to the software cursor. Switch to a software cursor (only) and notice the improvement.
The standard trick/workaround that most games use to hide input lag -- is to hide the hardware cursor and only display a software cursor (using HTML5's Element.requestPointerLock() is one way to do this). This trick 'hides' the lag, but the lag is still there, which still affects game play.
The lesson learned: Play this game in web browser that has a TWO frame input lag (Chrome/Windows) and then play the game in web browser that has a ONE frame input lag (Safari/OSX), and you will notice that you play better (advance to higher levels) in a ONE frame delay web browser. Use the input lag detector at vsynctester.com to confirm the mouse input lag of your web browser.

Background image obtained from NASA/JPL-Caltech