[resize-observer] why we need ResizeObserver.takeRecords()
or ResizeObserver.hasRecords()
(the canvas flickering problem)
#9717
Labels
Spec: https://drafts.csswg.org/resize-observer/#resize-observer-interface
There's one main problem with ResizeObserver and rendering using canvas:
requestAnimationFrame
for animatingSHOW_FLICKER_PROBLEM
totrue
at the bottom, then repeatedly resize the example)So, how do we know that we need to avoid drawing in rAF, and instead draw in an RO callback?
That's where this issue comes in.
If we had
ResizeObserver.takeRecords()
, we could get the records, run the resize logic in rAF, and then draw.If we had
ResizeObserver.hasRecords()
, we could skip drawing in rAF, then let the draw happen in the following RO callback.Note, if we get other observers like
ComputedStyleObserver
andBoundingClientRectObserver
orClientRectObserver
for short, the same problem will exist with those if they run after rAF but before browser paint, and they should also havetakeRecords
and preferablyhasRecords
.An alternative API that would help with these problems would be
requestFinalFrame
orrequestPaintFrame
.The convention for web developers would become:
requestAnimationFrame
ResizeObserver
,ComputedStyleObserver
,MutationObserver
, etc)requestFinalFrame
(orrequestPaintFrame
or whatever name we come up with) to apply final drawing/rendering.The text was updated successfully, but these errors were encountered: