Pointer on iphone

We have issues with pointer event and iPhones! Dam iPhones! :wink:

The cause of the problem is how the scroll is handled on the iPhone. Because depending on if you scroll up or down, the iPhone makes a bottom bar appear and disappear on your screen. And it can mess up with the pointer event, this one has offset which is randomly above or below the right position

An example: See the image below, the white sphere above the shirt is clickable, when the page finish loading it works good, if you play with the scroll going up and down, the sphere will not be clickable anymore. In fact, you will notice that the triggered has moved somewhere along the red line I have drawn.

Here is the link to the scene if you want to check it out: Owayn

As this is on mobile, I am not sure a playground is useful? Tell me if it can help.

@Deltakosh, I added pepjs :wink:

Did you make sure to call engine.resize() when page is resized?

Yep and actually I noticed this is what makes the screen flash sometimes when the bottom bar appear and disappear, you can see that flash when you scroll randomly and fast too.
When I remove the engine.resize() function, there is no more flash…

And if you don’t call it on iPhone, does it solve the issue?

There have been several functional fixes for this issue over the years but apple is determined to remain literal garbage re: open web standards and breaks every fix that is found.

The most recent solution I saw working involved intercepting the touchmove event with a stopPropagation() or preventDefault() or somesuch, but it was also intentionally broken afaik.

I don’t have an idevice to test on, but here may be potentially the most recent still-working fix for this:

If you find success, I would love to hear about it!

1 Like

Ok I made it work!

But I can’t say I like how :grin:

I noticed that the bottom bar disparition wasn’t exactly prompt. So I just added a timeout before doing the engine.resize and it worked!

But I still have the screen flashing when the resize function is called, anyway to avoid that?


try to do it in the scene.registerBeforeRender()

Yes it also works @Deltakosh,

Always good pointer position and no flash. But is it good for performance to resize on every frame?

1 Like

you wont resize on every frame :slight_smile: only when you need to

1 Like

I will. Thank you master yoda! :pray:

1 Like