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

> Only being able to obtain the pixel perfect guaranteed size of a canvas asynchronously via an event does not strike as a good enough solution. That will lead to all sorts of crazy patterns where one cannot properly specify the size of a canvas in one block of code, but must do a two stage algorithm to change the size.
> 
> Further, the upcoming OffscreenCanvas specification

It's not upcoming, this is already a supported feature in Chrome. :)

That being said, since an OffscreenCanvas in a worker is in a different thread, it is not possible to resize it perfectly in concert with the rest of the page, when resized. What should be done is that a resize observer for it should postMessage the resulting device pixel border box to the worker, causing a subsequent resize + redraw of the canvas texture.

>If I understood the conversation above correctly, I find it odd that "browser may need to relayout" was stated as a reason to not be able to implement such synchronous API - after all the [.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) API already exists and that is not asynchronous either? (Iiuc calling `.getBoundingClientRect()` will require resolving a relayout if one is pending?)

The problem with such an API is that:
(a) there is no time the developer can call it and be sure that it's right. getDeviceRects() would clean layout, but it would clean a layout that is not actually what is drawn on screen, and
(b) there is no method other than polling to know when to check that it might have changed.

An example of (a) being hard is that the inputs to layout may change *after* the call to getDeviceRects(), but before javascript yields to rendering:

canvas.getDeviceRects();
...
divContainingCanvas.style.width = '200px';
..
yield to rendering

In a large, multi-widget application such patterns are common. 



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

Received on Thursday, 20 June 2019 21:00:04 UTC