[csswg-drafts] [ResizeObserver] ResizeObserver spec should probably mention issues with requestAnimationFrame (#9814)

greggman has just created a new issue for https://github.com/w3c/csswg-drafts:

== [ResizeObserver] ResizeObserver spec should probably mention issues with requestAnimationFrame ==
The [ResizeObserver spec](https://drafts.csswg.org/resize-observer/)

I think, most obvious way to use the `ResizeObserver` API is as follows

```js
function drawToCanvas() {
  // draw to canvas
}

const observer = new ResizeObserver(entries => {
  const entry = entries[0];
  canvas.width = entry.contentBoxSize[0].inlineSize;
  canvas.height = entry.contentBoxSize[0].blockSize;
  drawToCanvas();
});
observer.observe(canvas);
```

(simplified example, not going over all entries)

If you're making an example that uses `requestAnimationFrame` tho, you don't want to draw in the `ResizeObserver`, you only want to draw in `requestAnimationFrame`. You also don't want to draw twice, one in rAF and once in the ResizeObserver callback, as drawing might be very heavy (1000s of draw calls)

Arguably, the most obvious modification of the code above to a rAF based solution is this


```js
function drawToCanvas() {
  // draw to canvas
  requestAnimationFrame(drawToCanvas);
}
requestAnimationFrame(drawToCanvas);

const observer = new ResizeObserver(entries => {
  const entry = entries[0];
  canvas.width = entry.contentBoxSize[0].inlineSize;
  canvas.height = entry.contentBoxSize[0].blockSize;
});
observer.observe(canvas);
```

It's every small change. Start a rAF loop. Resize the canvas when you get a `ResizeObserver` callback. Done.

Unfortunately, this results in a poor experience. Because `ResizeObserver` events are delivered after `requestAnimationFrame` events (see event loop spec), setting the size of the canvas in the `ResizeObserver` callback will clear it **after rendering but before compositing*

[Example](https://jsgist.org/?src=7e90155e0312e6a2c0f68bedfb54dbe4) (resize the window or drag the divider or open the devtools and drag that divider, watch the flicker)

It seems like it would be a good idea to call this issue out in the spec?


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9814 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 17 January 2024 22:53:04 UTC