PEP does not polyfill offsetX and offsetY properties

[AlvinStanescu]

Hi everyone,

I'm currently trying to use PEP in Chrome (version 0.3.0) for an implementation already working in IE11 using native PointerEvents and I noticed that the offsetX and offsetY properties are missing from the event.

These could easily be polyfilled by using e.offsetX = e.pageX - e.target.getBoundingClientRect().left and e.offsetY = e.pageY - e.target.getBoundingClientRect().top.

Is this a known issue?

Thanks,
Alvin

[dmethvin]

Calling getBoundingClientRect() in the event handler like that will force layout if it's dirty, so it should be avoided unless you absolutely know you need the values. See jquery/jquery#2337 for a related discussion.

[stuartpb]

To clarify, offsetX and offsetY are neither standard properties of the PointerEvent interface, nor the MouseEvent interface it inherits from.

[patrickhlauke]

Well, they are part of the CSSOM View Module's extension to mouse events http://www.w3.org/TR/cssom-view/#extensions-to-the-mouseevent-interface so they are in an indirect way part of the standard properties of the PE interface, as that simply extends the existing mouse interface (which in most? modern browsers includes the extension from CSSOM)

[scottgonzalez]

We can avoid the unnecessary overhead by using Object.defineProperty() since we've abandoned ES3 environments. Users will still need to be aware of the performance hit if they request those values, but at least we can make them work.

[jzaefferer]

Need to check if the suggested polyfill above is correct. Can compare native mouse offsetX/Y with calculated values.

[greggman]

Providing offsetX and offsetY would be great but it's a lot harder than it looks.

Here's an example using offsetX and offsetY

https://greggman.github.io/doodles/test/3d-css-and-offsetXY/3d-css-and-offsetXY.html

It seems to work in Chrome and Firefox both on desktop and on mobile (and Safari via mouse events on desktop)

Here's the same thing with the polyfill added

https://greggman.github.io/doodles/test/3d-css-and-offsetXY/3d-css-and-offsetXY-with-polyfill.html

It has 2 issues

1. because it doesn't handle CSS transforms it doesn't work on iOS Safari

2. because it adds PointerEvent the code tries to use them but since it can't handle CSS transforms it now fails on Safari Desktop as well.

[patrickhlauke]

PEP has now entered emeritus status at the OpenJS Foundation. This repository is now archived.