[w3c/uievents] Define what layerX/layerY do in presence of transforms. (Issue #398)

emilio created an issue (w3c/uievents#398)

In [this test-case](https://bug1975653.bmoattachments.org/attachment.cgi?id=9499505), `layerX` and `layerY` do different things in Firefox and Chromium / WebKit.

Clicking on the bottom right of the square shows ~100 for Firefox and ~200 for Chrome/WebKit

```html
<!doctype html>
<pre id="log"></pre>
<div id="target" style="width: 100px; height: 100px; border: 1px solid; transform: scale(2); transform-origin: 0 0;">
  <div id="inner" style="width: 100px; height: 100px; background: linear-gradient(green, purple)"></div>
</div>
<script>
inner.addEventListener("click", function(e) {
  log.appendChild(document.createTextNode(`(${e.layerX}, ${e.layerY})\n`));
});
</script>
```

If you have nested transforms, it gets even weirder (Chrome/WebKit scale by all ancestor transforms, which seems really odd?). See [here](https://bugzilla.mozilla.org/attachment.cgi?id=9499508) for a test-case.

I would expect Firefox's behavior. I _could_ get behind the behavior of scaling by the "layer"s transform. But scaling by all ancestor layers doesn't quite make sense to me? The coordinates get kinda meaningless in that case / you need to un-scale them to do the right thing...

cc: @chrishtr @dtapuska @mfreed7 @smfr @annevk 

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3c/uievents/issues/398
You are receiving this because you are subscribed to this thread.

Message ID: <w3c/uievents/issues/398@github.com>

Received on Wednesday, 9 July 2025 14:24:43 UTC