Re: [csswg-drafts] [resize-observer] device-pixel-border-box size (#3554)

> function rafCallback() {
>   observer.unobserve(myCanvas);
>   observer.observe(myCanvas, {box: 'device-pixel-border-box'});
>   requestAnimationFrame(rafCallback);
> }

This feels like an abuse of the observer model, and I think also causes running garbage collection pressure from `{box: 'device-pixel-border-box'}` each frame. (Wasm applications strive to run garbage free to avoid JS performance issues). :/

How do browsers like if rendering would always take place outside the rAF function?

Does the following achieve the same?

```js
function observeCanvasSizeChange(canvas) {
  function observerCallback(entry, observer) {
    let devicePixelBorderBoxRect = entry[0].devicePixelBorderBox;
    canvas.deviceWidth = devicePixelBorderBoxRect.width;
    canvas.deviceHeight = devicePixelBorderBoxRect.height;
  }
  var observer = new ResizeObserver(observerCallback);
  observer.observe(canvas, {box: 'device-pixel-border-box'});
}

function rafCallback() {
  render(myCanvas.deviceWidth, myCanvas.deviceHeight);
  requestAnimationFrame(rafCallback);
}
observeCanvasSizeChange(myCanvas);
requestAnimationFrame(rafCallback);
```
or does that also have the problem that rendering may occur to wrong(unsynchronized) size e.g. under continuous DOM size animation?

-- 
GitHub Notification of comment by juj
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3554#issuecomment-514973726 using your GitHub account

Received on Thursday, 25 July 2019 09:37:23 UTC