Why does event.offsetX/Y provide different values in Firefox/Edge vs Chrome?

// static logger
const _log = document.getElementById('_log');
const log = (...vals) => {
 _log.textContent += vals.map(v => JSON.stringify(v)).join(' – ') + '\n';
}
const clearLog = () => { _log.textContent = "";}

// actual code
document.getElementById('parent').onmousemove = function(e) {
  // new true event
  if(e.isTrusted) { clearLog(); }
  // in case we are not the true target
  if(e.target !== e.currentTarget) {
    // create a synthetic event
    const synth = new MouseEvent('mousemove', { clientX: e.clientX, clientY: e.clientY});
    // dispatch it *synchronously* on us
    e.currentTarget.dispatchEvent(synth);

    // to show it would have been wrong in FF
    log('originals ', e.offsetX, e.offsetY);
    return;
  }
  // here the values are consistent
  log(e.isTrusted ? 'originals ' : 'synthetics', e.offsetX, e.offsetY);
};

#_log {
  background: #EEE;
  height: 3em;
  padding: 2px;
}
#parent {
  border: 1px solid;
  width: 400px;
  height: 200px;
}
#child {
  border: 1px solid;
  transform: translate(150px, 50px);
  width: 100px;
  height: 100px;
}

<pre id="_log"></pre>
<div id="parent">
  <div id="child">
  </div>
</div>