MouseConstraint does not work with pixelRatio above 1

[alexandernanberg]

What

When using pixelRatio: 'auto' the mouse constraint stops working on retina screens. The shapes "real" position is offset quite a lot, so you have to try to grab them where they are not drawn.

Why

Think that some calculation does not take the pixelRatio into account. Dug around a bit in the source but couldn't the cause.

Reproduction

https://codesandbox.io/s/nkm7pzmvn0

[liabru]

Can't seem to reproduce any issues with the mouse on your example even by setting pixelRatio: 2. Did you fix your code already? Can you give more information?

[alexandernanberg]

Did you test with the codesandbox link? I can still reproduce the bug (can't move any of the objects) 🤔 Are you testing with a screen/device that has a higher pixel ratio than 1?

I've tested on a MacBook Pro (2880 x 1800) and an iPhone 8 and both experience the same problem.

[alexandernanberg]

@liabru Friendly ping 🏓

[alexandernanberg]

Can you clarify why you closed this? I'm still seeing issues with this.

[tommers-walker]

Me too unfortunately..

[liabru]

This has been solved in commit d577477 but is not yet in a release, it will be included in the next one.

[richgcook]

Is anyone still getting this issue? I'm using v0.14.2

[niloriver]

Me too unfortunately..
Anyway thanks for the amazing work.

[osterreich]

Setting mouse.pixelRatio = 1 fixed the issue for me:

const mouse = Mouse.create(render.canvas);
mouse.pixelRatio = 1;

[gettingwings]

Setting mouse.pixelRatio = 2 fixed the issue for me as I am using a Mac

const mouse = Mouse.create(canvas.elt);
mouse.pixelRatio = 1;

this made the mouse constraint work on canvas too

const mouse = Mouse.create(render.canvas);
was already working fine for me even without fixing the pixelRatio

[Yahasana]

mouse.pixelRatio = window.devicePixelRatio;

[kristofferso]

I just ran into this issue, but only on Android-devices. Setting pixelRatio to window.devicePixelRatio on Render.create() makes MouseContrains have an offset to the top left of where it's displayed in the canvas on Android devices. iOS works fine. I solved it with a temporary fix:

const isAndroid = navigator.userAgent.match(/Android/i)
const pixelRatio = isAndroid ? 1 : window.devicePixelRatio || 1

[fionchadd]

I just ran into this issue, but only on Android-devices. Setting pixelRatio to window.devicePixelRatio on Render.create() makes MouseContrains have an offset to the top left of where it's displayed in the canvas on Android devices. iOS works fine. I solved it with a temporary fix:

const isAndroid = navigator.userAgent.match(/Android/i)
const pixelRatio = isAndroid ? 1 : window.devicePixelRatio || 1

Thank-you so much for this!