W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2019

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

From: juj via GitHub <sysbot+gh@w3.org>
Date: Thu, 25 Jul 2019 09:37:21 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-514973726-1564047440-sysbot+gh@w3.org>
> 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?

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);
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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:50 UTC