Skip to content

Instantly share code, notes, and snippets.

@nishanths
Last active August 13, 2017 19:13
Show Gist options
  • Save nishanths/fb6fc75421d8fc4c1f8f9617364d98d1 to your computer and use it in GitHub Desktop.
Save nishanths/fb6fc75421d8fc4c1f8f9617364d98d1 to your computer and use it in GitHub Desktop.
window.onload = () => {
var iframe = document.querySelector("iframe");
var container = iframe.contentDocument.querySelector(".container");
var d = iframe.contentDocument.querySelector(".d");
var hackForceRecompute = () => {
// Any one of the following is sufficient.
iframe.offsetWidth;
iframe.offsetHeight;
iframe.getBoundingClientRect();
}
var handler = () => {
console.log("resizing about to start;", "height:", iframe.style.height, "width:", iframe.style.width, "time:", performance.now());
iframe.style.height = "700px";
iframe.style.width = "700px";
console.log("resizing done;", "height:", iframe.style.height, "width:", iframe.style.width, "time:", performance.now());
// hackForceRecompute();
d.removeEventListener("mouseenter", handler);
}
d.addEventListener("mouseenter", handler);
container.addEventListener("mousemove", e => {
console.log("e.clientX:", e.clientX, "e.clientY:", e.clientY, "time:", performance.now());
});
};
<!doctype html>
<head>
<style>
body {
margin: 0;
}
.container {
height: 700px;
width: 700px;
position: absolute;
right: 0;
bottom: 0;
overflow: hidden;
}
.d {
height: 200px;
width: 200px;
background: black;
opacity: 1;
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="d"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
iframe {
background: red;
position: fixed;
right: 0;
bottom: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<p>This is reproducible on Chrome Version 60.0.3112.90 (Official Build) (64-bit).</p>
<ol>
<li>Move mouse over the red area. Observe the logged e.clientX and e.clientY values.</li>
<li>Now quickly move mouse into the black square <code>(.d)</code>.</li>
<li><code>.d</code>'s' mousenter handler will run. It will make the iframe size larger.</li>
<li>Notice that the first e.clientX and e.clientY values logged after <code>.d</code>'s mousenter handler
finished were computed based on the old iframe size.</li>
</ol>
<p>If the hack function call is uncommented, step 4 will no longer produce the wrong result.</p>
</div>
<iframe src="iframe.html" style="height: 400px; width: 400px"></iframe>
<script src="hack-repro.js"></script>
</body>
</html>
e.clientX: 248 e.clientY: 171 time: 1791.75
e.clientX: 248 e.clientY: 192 time: 1802.635
resizing about to start; height: 400px width: 400px time: 1806.14
resizing done; height: 700px width: 700px time: 1806.81
e.clientX: 552 e.clientY: 516 time: 1810.705
e.clientX: 559 e.clientY: 537 time: 1811.91
e.clientX: 570 e.clientY: 561 time: 1820.045
e.clientX: 607 e.clientY: 617 time: 1844.82
e.clientX: 622 e.clientY: 629 time: 1858.24
e.clientX: 622 e.clientY: 629 time: 1859.33
e.clientX: 173 e.clientY: 170 time: 1726.395
e.clientX: 189 e.clientY: 195 time: 1734.82
resizing about to start; height: 400px width: 400px time: 1754.335
resizing done; height: 700px width: 700px time: 1754.9950000000001
e.clientX: 228 e.clientY: 236 time: 1755.515
e.clientX: 547 e.clientY: 555 time: 1765.74
e.clientX: 561 e.clientY: 564 time: 1767.875
e.clientX: 571 e.clientY: 570 time: 1774.405
e.clientX: 579 e.clientY: 574 time: 1781.73
e.clientX: 587 e.clientY: 574 time: 1810
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment