[csswg-drafts] [css-transforms-2] Do 3D tranforms contribute to scrollable overflow? (#8851)

dholbert has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-transforms-2] Do 3D tranforms contribute to scrollable overflow? ==
If an element gets a 3d transform in the Z axis, that makes it visually grow in the x and y dimension, does that contribute to its scrollable overflow in those dimensions?

Here's a testcase, with a 3D-transformed element inside of a scrollable area, using `perspective` and `translate3d`.  There are three cases, to perform a `translate3d(...)` translation with a nonzero x, y, and z component, respectively, each of which cause the element to overflow the bounds of its scrollable ancestor. Testcase link:
https://bug760753.bmoattachments.org/attachment.cgi?id=9334738


In Firefox, the scrollable ancestor gains scrollbars in all cases, and you can scroll to reach the lime borders on the bottom and right edges of the transformed shape.

In Chromium and WebKit, the first two scrollable areas get scrollbars, but the third does not.  You can't scroll to reach the lime border on the bottom or right of the shape in that 3rd case.  This implies that those engines aren't treating the (flattened-to-2d-space) Z-axis transform as contributing to scrollable overflow.

Who's correct here? css-transforms-2 doesn't say anything about scrollable overflow that I can find, so I think it needs some clarification.

css-transforms-1 does say a little bit, and it sounds like it's calling for Firefox's behavior, though the text was probably written before 3d transforms existed, so I'm not sure if it's meant to apply to the "flattened-to-screen-pixels" bounds of an element after a z-axis transform.  (Nonetheless, it seems reasonable to interpret it as such.) [Here's the relevant text there:](https://drafts.csswg.org/css-transforms-1/#transform-rendering)
> [...] transforms can extend (but do not shrink) the size of the overflow area, which is computed as the union of the bounds of the elements before and after the application of transforms

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8851 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 17 May 2023 22:50:06 UTC