Mouse/touch event handling bug

I'm not positive that this is a bug, but it sure is confusing that the code below results in 3 very different behaviors in the browser, depending on whether devtools is open and on the device selected.

To recreate:

• paste code below into the online editor in chrome browser
• drag square around with mouse: sketch works as expected
• open dev-tools and try the same: mouse is now out of sync
• now open device-emulator with touch device: rect can no longer be dragged

Three behaviors (with mouse-events):

1. With no js console closed, sketch works as expected
2. with console opened but no device emulator, rect and mouse are out of sync
3. with a touch-device in device emulator, mousePressed is never called and the rect is undraggable

With touch-events (comment mouse-events and uncomment touch-events below), the only difference is that in case C, we get behavior B (rect & mouse are out of sync)

  let x = 100, y = 100, active = false;

  function setup() {
    createCanvas(400, 400);
  }

  function draw() {
    background(0);
    rect(x, y, 50, 50);
  }

  //function touchEnded() {
  function mouseReleased() {
    //console.log('mouseReleased');
    active = false;
  }

  //function touchStarted() {
  function mousePressed() {
    //console.log('mousePressed', mouseX-pmouseX);
    active = (mouseX > x && mouseX < x + 50 && mouseY > y && mouseY < y + 50);
  }

  //function touchMoved() {
  function mouseDragged() {
    //console.log('mouseDragged:',mouseX-pmouseX);
    if (active) {
      x += mouseX - pmouseX;
      y += mouseY - pmouseY;
    }
  }

Reproduce the sketch from the issue in Chrome using the online editor, first with mouse input and then with DevTools and the touch-device emulator enabled. Compare mouse and touch callbacks and coordinate behavior; done means dragging remains available and the square stays aligned in all three reported environments.