Phaser 3: Overlap incorrect location

I'm using a callback function on the overlap method to do something when 2 sprites overlap each other. However, the function is being called in the wrong place I.E. when they're not overlapping, and is not being called in the correct place I.E. when they are overlapping. After a bit of calculation and trial and error, I discovered that it seems that the overlap method is ignoring the origin and scrollFactor that I have applied to the sprite when calculating the overlap location. When I leave these properties as their defaults, the overlap fires in the correct place. I've raised an issue on github: https://github.com/photonstorm/phaser/issues/3810

HTML

<script src="https://github.com/photonstorm/phaser/releases/download/v3.9.0/phaser.min.js"></script>
<div>
  <p>The counter displayed in the top left of the canvas should increment while the blue object overlaps with the orange object.</p>
  <ul>
    <li><strong>Problem 1</strong>: Phaser appears to ignore the orange objects scrollFactor and assumes it has the default scrollFactor of 1.</li>
    <li><strong>Problem 2</strong>: Phaser also appears to ignore the orange objects origin and assumes it has the default origin of 0.5</li>
  </ul>
  <p>The translucent object has been added as an image with both origin and scrollFactor left as their defaults; it does not have any physics enabled and therefore doesn't have any overlap rules of its own. It is simply there to highlight where the orange objects overlap is being applied instead of being applied where the orange object actually is.</p>
</div>

CSS

html, body {
  margin: 0;
  padding: 5vh;
  min-height: 100vh;
  overflow: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
canvas {
  margin: 0;
  padding: 0;
}
body > * {
  flex: 0 0 auto;
}
div {
  max-width: 80vw;
}

JavaScript

var config = {
  type: Phaser.AUTO,
  width: 400,
  height: 400,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: {
        x: 0,
        y: 0
      },
      debug: true
    }
  },
  scene: {
    key: 'main',
    preload: preload,
    create: create,
    update: update
  }
};

var game = new Phaser.Game(config);
var demoObj1;
var demoObj2;
var demoObj3;
var demoBG;
var mainCamera;
var text;
var count = 0;

function preload() {
  this.load.image('demoBG', 'https://image.ibb.co/mKX8rd/demoBG.png');
  this.load.image('demoObj1', 'https://image.ibb.co/jFJRcJ/demoObj1.png');
  this.load.image('demoObj2', 'https://image.ibb.co/hNtsHJ/demoObj2.png');
  this.load.image('demoObj3', 'https://image.ibb.co/hNtsHJ/demoObj2.png');
}

function create() {
  demoBG = this.add.image(0, 0, 'demoBG');
  demoBG.setOrigin(0);
  demoBG.setAlpha(0.25);
  demoObj1 = this.physics.add.sprite(0, 10, 'demoObj1');
  demoObj1.setCollideWorldBounds(true);
  demoObj2 = this.physics.add.staticSprite(400, 100, 'demoObj2');
  demoObj2.setCollideWorldBounds(true);
  //demoObj2.setScrollFactor(0.1, 1);
  demoObj2.setOrigin(1).refreshBody();
  demoObj3 = this.add.image(400, 100, 'demoObj3');
  // demoObj3.setCollideWorldBounds(true);
  demoObj3.setAlpha(0.25);

  this.physics.world.bounds.width = config.width * 4;
  this.physics.world.bounds.height = config.height;
  this.physics.add.overlap(demoObj1, demoObj2, overlapFunc)

  cursors = this.input.keyboard.createCursorKeys();

  mainCamera = this.cameras.main;
  mainCamera.setBounds(0, 0, config.width * 4, config.height);
  mainCamera.startFollow(demoObj1, false, 1, 1, 0, 100);

  text = this.add.text(10, 10, count, {
    fontSize: '20px',
    fill: '#ffffff',
    stroke: '#000000',
    strokeThickness: 4
  });
  text.setScrollFactor(0);
}

function update() {
  if (cursors.left.isDown) {
    demoObj1.body.setVelocityX(-400);
  } else if (cursors.right.isDown) {
    demoObj1.body.setVelocityX(400);
  } else {
   ...