robertknight/transform-inline-click-bug.html

## transform-inline-click-bug.html
<body>
<ol>
	<li>Hover the mouse over the space between 'World' and 'Test' below,
	note that the cursor is <i>not</i> a pointer and clicking
	in the space does not log a console message.</li>
	<li>Hover the mouse over 'World', resulting in the #clickme
	element's background being highlighted in red</li>
	<li>Now repeat step (1) and notice that the #clickme:hover
	selector <i>is</i> applied and clicking in the space does
	log a console message</li>
</ol>
<hr>
<span id="clickme">
	<span class="left">Hello</span>
	<span>World</span>
	<span class="right">Test</span>
</span>
<style>
#clickme {
  cursor: pointer;
}

#clickme:hover {
  background-color: red;
}

.left {
  display: inline-block;
  margin-right: 10px;

  /* at least one child of the inline element
	 needs to have a transform applied to trigger
	 the effect
  */
  transform: translateY(0px);
}

.right {
  display: inline-block;
  margin-left: 200px;
}
</style>
<script>
document.getElementById('clickme').addEventListener('click', function () {
	console.log('element clicked');
});
</script>
</body>
	<body>
	<ol>
	<li>Hover the mouse over the space between 'World' and 'Test' below,
	note that the cursor is <i>not</i> a pointer and clicking
	in the space does not log a console message.</li>
	<li>Hover the mouse over 'World', resulting in the #clickme
	element's background being highlighted in red</li>
	<li>Now repeat step (1) and notice that the #clickme:hover
	selector <i>is</i> applied and clicking in the space does
	log a console message</li>
	</ol>
	<hr>
	<span id="clickme">
	<span class="left">Hello</span>
	<span>World</span>
	<span class="right">Test</span>
	</span>
	<style>
	#clickme {
	cursor: pointer;
	}

	#clickme:hover {
	background-color: red;
	}

	.left {
	display: inline-block;
	margin-right: 10px;

	/* at least one child of the inline element
	needs to have a transform applied to trigger
	the effect
	*/
	transform: translateY(0px);
	}

	.right {
	display: inline-block;
	margin-left: 200px;
	}
	</style>
	<script>
	document.getElementById('clickme').addEventListener('click', function () {
	console.log('element clicked');
	});
	</script>
	</body>