I've got a page that reads the cursor location in event.clientX/Y and compares it with element.getBoundingClientRect() to do hit testing. This works even when the page scrolls or when Cmd+ is used. I found that in Safari (not Chrome), when I zoom the page in with a pinch gesture and scroll, the .clientX/Y are wrong. I made this snippet that shows the fixed element not following the mouse when zoomed.
window.onmousemove = function(event)
{
// it seems like if document is not zoomed, correction is not needed. but if it is, correction IS needed.
var x = event.clientX /*+ window.pageXOffset*/;
var y = event.clientY /*+ window.pageYOffset*/;
document.getElementById('cursor').style.left = x+'px';
document.getElementById('cursor').style.top = y+'px';
document.getElementById('cursor').innerText = [x,y,document.getElementById('cursor').getBoundingClientRect().x,document.getElementById('cursor').getBoundingClientRect().y];
}
/* force a large page */
document.write('<pre>');
for (var i = 0; i <= 100; i++) { document.write("<mark>" + i + "</mark>"); }
for (var i = 1; i <= 100; i++) { document.write("<mark>" + i + "</mark><br>"); }
document.write('</pre>');html, body { min-height: 100%; }
mark { display: inline-block; width: 30px; height: 30px; outline: thin solid black; }<!DOCTYPE html5>
<div id=cursor style="position: fixed; left: 30px; top: 30px; background: red;"></div>UPDATE: Run Snippet is behaving correctly, however the following code in a plain html file is not. S.O. might be doing something to the event before the snippet gets it.
<!DOCTYPE html5>
<style>
html, body { min-height: 100%; }
mark { display: inline-block; width: 30px; height: 30px; outline: thin solid black; }
</style>
<div id=cursor style="position: fixed; left: 30px; top: 30px; background: red;"></div>
<script>
window.onmousemove = function(event)
{
// it seems like if document is not zoomed, correction is not needed. but if it is, correction IS needed.
var x = event.clientX /*+ window.pageXOffset*/;
var y = event.clientY /*+ window.pageYOffset*/;
document.getElementById('cursor').style.left = x+'px';
document.getElementById('cursor').style.top = y+'px';
document.getElementById('cursor').innerText = [x,y,document.getElementById('cursor').getBoundingClientRect().x,document.getElementById('cursor').getBoundingClientRect().y];
}
/* force a large page */
document.write('<pre>');
for (var i = 0; i <= 100; i++) { document.write("<mark>" + i + "</mark>"); }
for (var i = 1; i <= 100; i++) { document.write("<mark>" + i + "</mark><br>"); }
document.write('</pre>');
</script>