LPGhatguy/chrome-repaint-bug.html

## chrome-repaint-bug.html
<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<style>
		.container > *:first-child::before {
			content: "X";
			color: black;
			font-size: 2em;
		}

		.container.a > *:first-child::before {
			content: "X: A";
			color: red;
		}

		.container.b > *:first-child::before {
			content: "X: B";
			color: blue;
		}
	</style>
</head>
<body>
	<div class="container a">
		<div class="child"></div>
	</div>

	<button class="switch">Switch</button>
	<button class="switch-fixed">Switch (with fix)</button>

	<p>
	Pressing the "Switch" button will toggle between the "A" and "B" state on the container above.<br>
	In Chrome (46+ at least) the container will not repaint.<br>
	In Firefox, Safari, and Edge, the container will repaint.<br>
	Chrome can be forced to repaint the element by reinserting it, which the second button does.
	</p>

	<script>
		"use strict";

		var container = document.querySelector(".container");

		var toggleA = function(e) {
			if (e.classList.contains("a")) {
				e.classList.add("b");
				e.classList.remove("a");
			} else {
				e.classList.add("a");
				e.classList.remove("b");
			}
		}

		var but = document.querySelector("button.switch");
		but.addEventListener("click", function() {
			toggleA(container);
		});

		var butFixed = document.querySelector("button.switch-fixed");
		butFixed.addEventListener("click", function() {
			toggleA(container);

			var p = container.parentElement;
			p.removeChild(container);
			p.insertBefore(container, p.firstChild);
		});
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Test</title>
	<style>
	.container > *:first-child::before {
	content: "X";
	color: black;
	font-size: 2em;
	}

	.container.a > *:first-child::before {
	content: "X: A";
	color: red;
	}

	.container.b > *:first-child::before {
	content: "X: B";
	color: blue;
	}
	</style>
	</head>
	<body>
	<div class="container a">
	<div class="child"></div>
	</div>

	<button class="switch">Switch</button>
	<button class="switch-fixed">Switch (with fix)</button>

	<p>
	Pressing the "Switch" button will toggle between the "A" and "B" state on the container above.<br>
	In Chrome (46+ at least) the container will not repaint.<br>
	In Firefox, Safari, and Edge, the container will repaint.<br>
	Chrome can be forced to repaint the element by reinserting it, which the second button does.
	</p>

	<script>
	"use strict";

	var container = document.querySelector(".container");

	var toggleA = function(e) {
	if (e.classList.contains("a")) {
	e.classList.add("b");
	e.classList.remove("a");
	} else {
	e.classList.add("a");
	e.classList.remove("b");
	}
	}

	var but = document.querySelector("button.switch");
	but.addEventListener("click", function() {
	toggleA(container);
	});

	var butFixed = document.querySelector("button.switch-fixed");
	butFixed.addEventListener("click", function() {
	toggleA(container);

	var p = container.parentElement;
	p.removeChild(container);
	p.insertBefore(container, p.firstChild);
	});
	</script>
	</body>
	</html>