nishanths/hack-repro.js

## hack-repro.js
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());
	});
};

## iframe.html
<!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>

## index.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>

## logs-with-hack.txt
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

## logs-without-hack.txt
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
	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