Skip to content

Instantly share code, notes, and snippets.

@Drunkar

Drunkar/chrome_gpu_bug_case.html

Created December 24, 2021 07:52
Show Gist options
  • Save Drunkar/69070137332bc9a67b0c09bb6c6a7e96 to your computer and use it in GitHub Desktop.
Save Drunkar/69070137332bc9a67b0c09bb6c6a7e96 to your computer and use it in GitHub Desktop.
Download ZIP
If you remove `touch-action: none;` at line 13, translate3d is accelrated by GPU correctly
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment