facemesh keypoints NOT aligned with video on mobile device

[jht9629-nyu]

Issue Type

Runtime Error

ml5.js Version

v1.3.1

Development Environment

local setup, p5js editor

Browser & Operating System

Safari 26.3, Chrome 145 on iOS 26.3,

Issue Description

• run face mesh example code on iOS mobile device in Safari or Chrome

• faceMesh-keypoints

• OR: run facemesh example from facemesh reference

• expected behavior: facemesh keypoints aligned with video.

• actual behavior: facemesh keypoints NOT aligned with video

• Not an issue on desktop with ml5@1.3.1

• Not an issue on mobile with ml5@1.2.0 (although you get error message "Initialization of backend webgpu failed")

Minimal Reproducible Example

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[gohai]

Hi @jht9629-nyu - I just tried it on my iPhone 16e with Chrome, and wasn't able to trigger the behavior that you shared.

For me, image and keypoints lined up correctly. Both appeared un-mirrored, by the way (I used faceMesh-keypoints with the default flipHorizontal: false). Was flipHorizontal perhaps part of your setup?

[gohai]

Hi from Shanghai!

[jht9629-nyu]

@gohai no adjustments were made to the sketch.
I experience issues on Safari 26.3 and Chrome 145 on iOS 26.3 on my iPhone15pro
What mobile version did you use?
You can use this link on your device to find out: whatismybrowser

[alanvww]

I'm actually getting the same result as @jht9629-nyu . The keypoints are actually not only not aligned but also rotate 90 degree. Will take a look of it.

[gohai]

@jht9629-nyu I am using Chrome 145 on iOS 18.6.

[shiffman]

I an confirm this happens on iOS with safari. @alanvww my guess is this has something to do with pixel "density" and/or the vertical / portrait orientation of the camera.