layout-instability

layout-instability copied to clipboard

The explainer and spec don't seem to agree on what the impact of CSS transform is, with respect to layout shift.

The spec: (1) doesn't mention the word transform at all, ever. (2) Defines layout shift in terms of the "visual representation" (3) Defines "visual representation" in a way that's not immediately obvious as to whether it includes transforms or not. https://wicg.github.io/layout-instability/#sec-basic-concepts

The explainer: (4) ...says that "Changing an element's transform affects its visual representation" (direct quote, emphasis added, note the use of the spec term "visual representation") (5) ...says that transform changes aren't treated as layout shifts https://github.com/WICG/layout-instability/blob/master/README.md#transform-changes

Concerns:

• Taking (2) and (4) together, it seems quite clear that transform does impact layout shift. (But that disagrees with (5).) But maybe the explainer is just misusing the spec's specially-defined term "visual representation"?

• The expectation should be made clearer in the spec itself. If we want to exclude transforms (and I think we do), then the spec should explicitly say something about that; possibly as a Note after whatever definition / concept-usage that it's currently leaning on to implicitly exclude them.

One other problematic spot with respect to transforms:

In the piece of the spec that excludes scrolling elements (sec 2.2, "there does not exist an Element P such that..."), the spec discusses whether the node N's position has changed within its scroll-container's "scrollable overflow region".

And importantly, transform does change an element's position within (and its contribution to) this scrollable overflow region. Here's a demo which changes transform of something in a scrollport on hover: https://jsfiddle.net/dholbert/n937w14L/ (note that the scrollbars change when transform changes, indicating that the scrollable overflow area has changed size, and obviously the transformed thing has changed position within it).

So it seems that at least this section of spec text does not exclude transforms right now - it would consider transforms as contributing to layout instability. That may be problematic...?

(EDIT: this comment might be addressed by https://github.com/WICG/layout-instability/issues/67 -- initially I was going under the stricter "Interpretation B" that I describe over there, but maybe the real intent is the other interpretation.)

Looking at tests, looks like modifying transform should not result in an entry (https://github.com/web-platform-tests/wpt/blob/master/layout-instability/transform-change.html), but transform needs to be considered when computing viewport overlap (https://github.com/web-platform-tests/wpt/blob/master/layout-instability/transform.html).

My understanding here is that CSS transforms are deliberately not included in this spec, because changing them does not induce layout -- no other elements on the page need to be adjusted because of a change to transform. (Yes, this is despite the fact that it absolutely does affect the visual representation of the element being transformed)

@npm1's note about the viewport overlap is certainly relevant, though, as a transformed element may be the container of other elements which are subject to layout shifts -- the layout of elements within a transformed container should probably be considered.