Hello everyone.
I also opened an issue on github, you can check via here: https://github.com/pixijs/pixi.js/issues/3616
Tested on versions `4.x.x` including latest `4.3.3`, I face this issue with `mouseover` and `mouseout `events in the following cases.
1) I have a rectangle (graphic object) that moves back and forth through the canvas. When I place my cursor in the middle of the canvas, as the shape moves and crosses over my cursor, `mouseover` and `mouseout` events fail to register in a random pattern.
2) For the second case, the rectangle doesn't move, but this time I cross over the shape with my mouse. As I move my mouse fast , `mouseover `and `mouseout` events fail to register in a random pattern as well.
Here you can check the code JsBin
Below I also share javascript file
/*
* Mouse events randomly fail to register when delta is large or
* rectangle width is small, or there's no animation but you
* simply move your mouse fast over the rectangle.
* Tested on versions 4.x.x including latest 4.3.3
*/
let delta = 15;
const width = 40;
const renderer = PIXI.autoDetectRenderer(400, 200)
document.body.appendChild(renderer.view)
const stage = new PIXI.Container()
const rect = new PIXI.Graphics()
rect.beginFill(0xf8d41f,1)
rect.drawRect(0, 0, width, 200)
rect.endFill()
rect.interactive = true
stage.addChild(rect)
rect.on('mouseover', function() {
console.log("1 mouseover")
this.alpha = 0.2
})
rect.on('mouseout', function() {
console.log("2 mouseout")
this.alpha = 1
})
animate()
function animate() {
if (delta > 0 && rect.position.x >= 400) {
delta = -delta
}
if (delta < 0 && rect.position.x <= 0) {
delta = -delta
}
rect.x += delta
renderer.render(stage)
requestAnimationFrame(animate)
}