890289 - DOM(html/css) and HTML5 canvas 2d context out of sync

Status: UNCONFIRMED

(Core :: Graphics: Canvas2D, defect)

Description

[Thomas]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:22.0) Gecko/20100101 Firefox/22.0 (Beta/Release)
Build ID: 20130618035212

Steps to reproduce:

I position a DOM-element (a div) on top of a canvas, and draw the same element on the canvas. Then, I want to update the location of both.

See following fiddle:
http://jsfiddle.net/4qher/2/





Actual results:

The position of the DOM element lags behind the drawing on the canvas. This is also the case when using requestAnimationFrame to pace the updates.


Expected results:

The location of the DOM-element should be updated at the same time the canvas refreshes. There should be no lag.

This is exactly the same bug which is also logged for chrome (https://code.google.com/p/chromium/issues/detail?id=169024). I think it has been fixed there by now (at least, I can't reproduce it on the latest chrome). It is still an issue for Firefox (v22.0). I also cannot reproduce it on IE9 and up.

A quote of one of the commenter's in the chromium-thread as to why this is important:

"
This issue can be very problematic when you are building a canvas-based game, but want to leverage the power of DOM for the GUI of the game. Having the UI (ie, unit health bars) follow units on the canvas around will cause a noticeable lag in the UI.
"

Comment 1

[Thomas]

tested this some more.

this ONLY happens when using requestAnimationFrame. When using setTimeout, I cannot reproduce this bug.

On Windows 7, 64 bit architecture.

Comment 2

[Thomas]

it also happens in the fiddle, when updating immediately in the mousemove handler.