`setInteractive` function is misaligned, when css padding is set

Phaser 3
1

I noticed that the hitbox on some buttons where misaligned, and after some testing, I found out it had to do with setting css padding. (Here a demo, showcasing the error). The Hitbox should be only on the red square, but the hitbox is more or less inside of the yellow square. Is this really an error, or did I do something wrong?
How could I prevent this?
I couldn’t find nothing in the github issues.

(Phaser Version 3.81)

2

You mustn’t pad the game canvas, only the parent.

See Parent and Display canvas containment guidelines in Phaser.Scale.ScaleManager.

1 Like
3

Thank you, I didn’t have this on the radar. Makes of course sense, thanks for your fast response. :+1: