Glow jumps around with inner "layers"

[Andrei Alecu]

First of all, love this package!

I ran into an issue with it, however. The glow is jumping around with certain inner elements. I noticed this is because of the use of layerX where srcElement on the pointermove might become one of the inner elements of the Glow container.

Here's a video that will explain what I mean:

CleanShot.2024-01-13.at.13.13.50.mp4

Repro at: https://stackblitz.com/edit/react-ts-jfk4fd?file=src%2FApp.tsx

I'll follow up with a PR to fix this.

[Andrei Alecu]

Note that the repro also doubles the HOVER ME text for some reason. I haven't looked into that.

[Mordechai Meisels]

Thanks for your contribution. Using layer x/y instead of offset is precisely done to avoid this effect. I'll look into your reproduction why this still happens.

Btw the doubling do the text is because you apply a padding to [glow]. I'll add an explainer to the readme to make this clearer.

[Andrei Alecu]

There's a quirk though. Per documentation of layerX/Y:

A positioned element is an element whose position property is set to relative, absolute or fixed. For more information about element positioning, see About Element Positioning. Note This property is provided for cross-browser compatibility. Use x instead.

https://webplatform.github.io/docs/dom/MouseEvent/layerX/

Any inner element with position absolute or relative will take over. I have verified that my PR at #4 fixes it with no performance problems - unless you have a different solution in mind. 🙂