Re: [csswg-drafts] [resize-observer] Which box information should we pass to the callback (#3329)

Had a F2F chat with @bfgeek on this topic. For the record,
here is a braindump of some of my thoughts, and our discussion:

Both sides agreed that the goal of this part of the API is to help developers write better code. 

Lets call code that runs inside RO callback "RO callback algorithm". The code inside this algorithm:
- might want to modify the Element, or its children.
- the only geometry data considered by this algorithm should be observable data. If your algorithm depends on unobserved data, and unobserved data changes, algorithm would be out of sync.

Out of sync example: algorithm looks at borderTop, paddingTop, to absolutely position child near the top. When border/padding changes, child would no longer be in the right spot.

What can be safely modified inside callback depends on Element's box-sizing, width/height properties, and observed box.

There are 2 main geometry-changing use cases we've imagined:
- modify Element's border/padding
- modify children (add/remove/place).

Here a chart on how interaction of CSS properties affects what can be safely
modified inside the callback:

|width/height | box-sizing | observed-box | modify border/padding | modify children |
|-------------|------------|--------------|-----------------------|-----------------|
|<length>     | border-box | border-box   |        safe           | safe
|<length>     | border-box | content-box  | not safe              | safe
|<length>     | content-box| border-box   | not safe              | safe
|<length>     |content-box |content-box   | safe                  | safe
|intrinsic    |border-box  |border-box    | not safe              | not safe
|intrinsic    |border-box  |content-box   | not safe              | not safe
|intrinsic    |content-box |border-box    | not safe              |not safe
|intrinsic    |content-box |content-box   | safe                  | not safe
|extrinsic    |border-box  |border-box    | safe                  |safe
|extrinsic    |border-box  |content-box   | not safe              |safe
|extrinsic    |content-box |border-box    | not safe              |safe
|extrinsic    |content-box |content-box   | safe                  |safe

You can see from this chart that interaction of observed boxes, and Element's CSS
properties constrain what can be safely modified in interesting ways. It'll
come in useful when discussing the question "is it useful to observe multiple 
boxes?". I think the answer is no.

Back to our discussion, and the original question:

Should we report only observed size, or all sizes?

I argued that we should report all sizes to prevent webdevs from shooting
themselves in the foot by using multiple ResizeObservers to observe
more than 1 size on a single Element.

@bfgeek argued that using non-observed sizes inside the callback is fundamentally
wrong, and that we should not encourage it.

I was convinced, and now I am in the "observe only one size, and report only one size" camp.

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

Received on Thursday, 24 January 2019 01:36:14 UTC