karllindmark/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Chrome :first-child selector bug</title>
		<script type="text/javascript">
			var num = 0;
			function addRow() {
				var row = document.createElement('tr');
				var row2 = document.createElement('tr');

				row2.innerHTML = '<td>Row #' + (++num) + ' (2)</td>';
				row.innerHTML = '<td>Row #' + (++num) + ' (1)</td>';

				document.getElementsByTagName('tbody')[0].prepend(row, row2);
			}

			/* Borrowed from https://gist.github.com/mgHenry/6154611 */
			function redrawTable() {
				var table = document.getElementsByTagName('table')[0];
				table.style.display = 'none';
				table.offsetHeight;
				table.style.display = 'block';
			}
		</script>
		<style>
			body {
				text-align: left;
				font-family: 'Comic Sans MS';
			}

			th, td {
				width: 480px;
			}

			th {
				border-bottom: 2px solid #000000;
			}

			tbody tr > td {
				border-top: 1px solid #ff0000;
			}

			tbody > tr:first-child > td {
				border-top: 1px solid transparent;
				background: #00FF00;
			}

			tbody > tr:first-child > td::after {
				content: 'FIRST';
				float: right;
				opacity: 0.5;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<p>
			<button onclick="addRow()">Add row to table</button>
			<button onclick="redrawTable()">Redraw table</button>
		</p>
		<table>
			<thead>
				<tr>
					<th>Title</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Chrome :first-child selector bug</title>
	<script type="text/javascript">
	var num = 0;
	function addRow() {
	var row = document.createElement('tr');
	var row2 = document.createElement('tr');

	row2.innerHTML = '<td>Row #' + (++num) + ' (2)</td>';
	row.innerHTML = '<td>Row #' + (++num) + ' (1)</td>';

	document.getElementsByTagName('tbody')[0].prepend(row, row2);
	}

	/* Borrowed from https://gist.github.com/mgHenry/6154611 */
	function redrawTable() {
	var table = document.getElementsByTagName('table')[0];
	table.style.display = 'none';
	table.offsetHeight;
	table.style.display = 'block';
	}
	</script>
	<style>
	body {
	text-align: left;
	font-family: 'Comic Sans MS';
	}

	th, td {
	width: 480px;
	}

	th {
	border-bottom: 2px solid #000000;
	}

	tbody tr > td {
	border-top: 1px solid #ff0000;
	}

	tbody > tr:first-child > td {
	border-top: 1px solid transparent;
	background: #00FF00;
	}

	tbody > tr:first-child > td::after {
	content: 'FIRST';
	float: right;
	opacity: 0.5;
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<p>
	<button onclick="addRow()">Add row to table</button>
	<button onclick="redrawTable()">Redraw table</button>
	</p>
	<table>
	<thead>
	<tr>
	<th>Title</th>
	</tr>
	</thead>
	<tbody></tbody>
	</table>
	</body>
	</html>