Mouse events randomly fail to register

[cyardimci]

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)
}