Drunkar/chrome_gpu_bug_case.html

## chrome_gpu_bug_case.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div style="height: 480px; width: 600px; display: block">
      <div
        style="
          height: 100%;
          position: relative;
          overflow: hidden;
          touch-action: none;
          display: block;
        "
      >
        <svg
          id="canvas-container"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:html="http://www.w3.org/1999/xhtml"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          version="1.1"
          width="600"
          height="480"
          style="
            background-color: rgb(200, 200, 200);
            position: absolute;
            overflow: hidden;
            display: block;
          "
        >
          <g id="canvas"></g>
        </svg>
        <svg
          id="surface"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:html="http://www.w3.org/1999/xhtml"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          version="1.1"
          width="600"
          height="480"
          style="
            display: none;
            overflow: visible;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 50;
          "
        ></svg>
      </div>
    </div>
  </body>
  <script>
    let isMouseDown = false,
      prevX = 0,
      prevY = 0,
      translateX = 0,
      translateY = 0;
    function mouseDown(e) {
      e.preventDefault();
      isMouseDown = true;
      // copy elements to canvas
      const surface = document.getElementById("surface");
      const canvas = document.getElementById("canvas");
      surface.appendChild(canvas);
      surface.style.display = "block";
    }

    function mouseMove(e) {
      e.preventDefault();
      if (isMouseDown) {
        translateX += e.pageX - prevX;
        translateY += e.pageY - prevY;
        const s = document.getElementById("surface");
        s.style.transform =
          "translate3d(" + translateX + "px, " + translateY + "px, 0px)";
      }
      prevX = e.pageX;
      prevY = e.pageY;
    }

    function mouseUp(e) {
      e.preventDefault();
      isMouseDown = false;
      // copy elements to canvas
      const surface = document.getElementById("surface");
      const canvasContainer = document.getElementById("canvas-container");
      const canvas = document.getElementById("canvas");
      canvasContainer.appendChild(canvas);
      surface.style.display = "none";
    }

    document.addEventListener("mousedown", mouseDown);
    document.addEventListener("mousemove", mouseMove);
    document.addEventListener("mouseup", mouseUp);
    const canvas = document.getElementById("canvas");
    for (let i = 0; i < 10000; ++i) {
      const c = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "circle"
      );
      const x = Math.floor(Math.random() * 1000);
      const y = Math.floor(Math.random() * 1000);
      const r = Math.floor(Math.random() * 200);
      c.setAttributeNS(null, "cx", x);
      c.setAttributeNS(null, "cy", y);
      c.setAttributeNS(null, "r", r);
      c.setAttributeNS(
        null,
        "style",
        "fill: blue; stroke: white; stroke-width: 5px;"
      );
      canvas.append(c);
    }
  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	</head>
	<body>
	<div style="height: 480px; width: 600px; display: block">
	<div
	style="
	height: 100%;
	position: relative;
	overflow: hidden;
	touch-action: none;
	display: block;
	"
	>
	<svg
	id="canvas-container"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:html="http://www.w3.org/1999/xhtml"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	version="1.1"
	width="600"
	height="480"
	style="
	background-color: rgb(200, 200, 200);
	position: absolute;
	overflow: hidden;
	display: block;
	"
	>
	<g id="canvas"></g>
	</svg>
	<svg
	id="surface"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:html="http://www.w3.org/1999/xhtml"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	version="1.1"
	width="600"
	height="480"
	style="
	display: none;
	overflow: visible;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	"
	></svg>
	</div>
	</div>
	</body>
	<script>
	let isMouseDown = false,
	prevX = 0,
	prevY = 0,
	translateX = 0,
	translateY = 0;
	function mouseDown(e) {
	e.preventDefault();
	isMouseDown = true;
	// copy elements to canvas
	const surface = document.getElementById("surface");
	const canvas = document.getElementById("canvas");
	surface.appendChild(canvas);
	surface.style.display = "block";
	}

	function mouseMove(e) {
	e.preventDefault();
	if (isMouseDown) {
	translateX += e.pageX - prevX;
	translateY += e.pageY - prevY;
	const s = document.getElementById("surface");
	s.style.transform =
	"translate3d(" + translateX + "px, " + translateY + "px, 0px)";
	}
	prevX = e.pageX;
	prevY = e.pageY;
	}

	function mouseUp(e) {
	e.preventDefault();
	isMouseDown = false;
	// copy elements to canvas
	const surface = document.getElementById("surface");
	const canvasContainer = document.getElementById("canvas-container");
	const canvas = document.getElementById("canvas");
	canvasContainer.appendChild(canvas);
	surface.style.display = "none";
	}

	document.addEventListener("mousedown", mouseDown);
	document.addEventListener("mousemove", mouseMove);
	document.addEventListener("mouseup", mouseUp);
	const canvas = document.getElementById("canvas");
	for (let i = 0; i < 10000; ++i) {
	const c = document.createElementNS(
	"http://www.w3.org/2000/svg",
	"circle"
	);
	const x = Math.floor(Math.random() * 1000);
	const y = Math.floor(Math.random() * 1000);
	const r = Math.floor(Math.random() * 200);
	c.setAttributeNS(null, "cx", x);
	c.setAttributeNS(null, "cy", y);
	c.setAttributeNS(null, "r", r);
	c.setAttributeNS(
	null,
	"style",
	"fill: blue; stroke: white; stroke-width: 5px;"
	);
	canvas.append(c);
	}
	</script>
	</html>