[csswg-drafts] [view-transitions-1] Mismatch between roots causes offset values (#8625)

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

== [view-transitions-1] Mismatch between roots causes offset values ==
https://simple-set-demos.glitch.me/circle-transition/

In this demo, the point the user taps is stored in JS, and used to create a revealing clip-path animation.

However, the circle doesn't appear in the right place in Android Chrome, and this is by design.

The data used is `mouseEvent.clientX`, `mouseEvent.clientY`, `window.innerWidth`, `window.innerHeight`, which are viewport-relative. However, the view transition uses the [snapshot root](https://drafts.csswg.org/css-view-transitions-1/#snapshot-root-concept).

On platforms where the URL bar can scroll away, the top-left of the snapshot root is underneath the URL bar (as if it overlays content), whereas in the regular viewport the top-left is after the URL bar.

To allow developers to translate from one to the other, we could provide `window.snapshotRoot`, which has the following properties:

- `pageLeft`
- `pageTop`

…which are relative to the viewport. And:

- `width`
- `height`

The naming is influenced by [Visual Viewport](https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport).

I don't think we'd need a change event, but we could add one later if it turns out we need one.

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


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

Received on Tuesday, 21 March 2023 15:53:28 UTC