Pickable prop on ScatterplotLayer causes strange shaking/scaling issue on iOS Safari

[amamenko]

Description

I've noticed that when the pickable prop is set to true on the ScatterplotLayer and the layer is clicked on mobile iOS Safari, the whole layer seems to scale and reorient its points in a strange fashion upon click and then returns back to normal. The expected behavior would be the layer maintaining its original orientation on click.

The tooltip need not be activated for this effect to be visible. The ScatterplotLayer works as expected with the pickable prop in Chrome.

Repro Steps

1. Create ScatterplotLayer with several points.
2. Set pickable prop to true.
3. Open iOS Safari browser.
4. Click anywhere on ScatterplotLayer (varying severity at different zoom levels).

An example of this scaling and shaking issue can be seen on the deck.gl website's ScatterplotLayer demo (which also has tooltip interactivity to show that the layer was indeed clicked.

Another example with more data points and an exaggerated effect can be seen below with my implementation of the ScatterplotLayer (layer is being clicked and no tooltips are shown).

Environment

iPhone 11 Software Version 14.1 on iOS Safari

Any assistance would be greatly appreciated!

Thanks.

[Pessimistress]

We are unable to reproduce this issue on this page with:

• iPhone 12 pro Max + iOS 14.2
• iPhone 11 Pro Max + iOS 14.2
• iPhone SE 2020 + iOS 14.2

You should check if your own app renders any additional DOM objects that messes with the CSS layout.

[amamenko]

Very odd. Perhaps this is just an iPhone 11 specific issue because I am still seeing the same behavior on the demo page. Not sure what DOM objects could be interfering on deck.gl’s own site.

[amamenko]

I was just able to reproduce this very same behavior on the deck.gl’s ScatterplotLayer demo with two other physical iPhone 11 devices. Not sure exactly what’s going on here.

[ibgreen]

Note: The iPhone 11 testing above was actually done on iOS 14.2, not iOS 14.1.

Light interaction with the ScatterplotLayer documentation did not show any "zoom breathing", although there is some noticeable z-fighting noise.

Any additional instructions to trigger it in the documentation page?

[amamenko]

I’ve noticed varying degrees of this sort of twitching effect and even layer flickering at different degrees of zoom. Again this occurs on the demo ScatterplotLayer and on my own app, I’m not sure what DOM content could be interfering.

Note: Reuploaded GIFs to show issue.

[Pessimistress]

Closing for inactivity. Reopen if able to reproduce.