Does not work touch event with iPad Pro (iOS 15.6.1)

Help & Support
1

Hi,

I have implemented mouse and touch events as follows, but mouse events are fired on iPad Pro.
Touch events are not fired.
iOS: 15.6.1

iPhone, Android devices are working fine.

Could not add pc.EVENT_TOUCHSTART on iPad Pro?

this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
this.app.mouse.on(pc.EVENT_MOUSEUP, this.onMouseUp, this);
this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);

// Touch events
if (this.app.touch) {
  this.app.touch.on(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
  this.app.touch.on(pc.EVENT_TOUCHEND, this.onTouchEnd, this);
  this.app.touch.on(pc.EVENT_TOUCHCANCEL, this.onTouchEnd, this);
  this.app.touch.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
}

I would appreciate it if anyone with more information could give me some advice.

Thank you.

2

Odd, they should work :thinking:

I don’t have access to an iPad but trying it on Browserstack seems fine

Project: Detecting a double tap | Learn PlayCanvas

1 Like
3

Can you post a project that reproduces your issue please?

4

Hi, yaustar

Thanks you for your reply.

I’m confusing now…

I confirmed Touch events has working fine other project on iPad Pro.
I implemented it in a slightly different way this time, probably I wondered if those codes were the problem.

Fisrt of all, I will organize my code.

5

Hi yaustar,

In this project, I used iframe and CSS3Remderer to show youtube.

Also, the project uses a virtual joystick to move the player.

Touch operation is possible in the development mode of the browser, but the UI controller does not work on Safari the actual iPad Pro.
iOS 15.6.1
Chrome works fine.

Also, It worked on my Android device. iPhone is unconfirmed.

I think the iframe is suspicious, and when I disabled the iframe entity, the UI controller works fine on Safari and the actual iPad Pro as well.

Project here
https://playcanvas.com/project/997705/overview/css3renderer_test

Do iframe and CSS3Renderere have some issues on iOS safari?

6

The problem was the code switches the controller processing between mobile and PC.

The iPad Pro could not respond to touch because it was return false under the follorwing conditions.

if( (app.touch && pc.platform.mobile) {
  // detach and atach app.touch
}

Therefore, by adding the user agent for iPad Pro to conditions, it become works fine, the code like below

let ipadpro;
if(navigator.userAgent.indexOf('Macintosh') > 0 &&
'ontouchend' in document) {
    ipadpro = true;
}

if( (app.touch && pc.platform.mobile) || ipadpro){
  // detach and atach app.touch
}

The problem solved and delete project url.

Thank you.

7

@m.tamura

Just to follow up with this, the issue is that iPad OS no longer tells browsers that it is a mobile browser, hence the check fails.

It might be enough to just do the following:

if( (app.touch) {
  // detach and atach app.touch
}

Instead of checking the agent.

1 Like