I don’t know if this is a bug in the browser or if this is the correct behavior.
The chrome browser on macOS for the example below returns pageX starting from 9 coordinate pixel but should start at 10, ending on 109 but should end at 110. An identical example on firefox browser returns the correct values. What could be the cause?
<div class="rect"></div>
body{
margin: 0;
}
.rect {
display: block;
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 10px;
left: 10px;
}
document.querySelector('div').addEventListener('mousemove', ({ pageX, pageY }) => console.log(pageX, pageY))
I expected to get the correct coordinates the same as those returned from the getBoundingClientRect() method.