When I created a grid of small 10px divs and added a mouseover listener to each one, I noticed an issue in Chrome. If I entered a div from the bottom with my mouse pointer, the event listener wouldn't trigger until I was about halfway up the div. This strange behavior only occurred when using small divs in Chrome, as making the divs larger or switching to Firefox resolved the problem.
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
for(var row = 0; row < 10; row++) {
var rowDiv = document.createElement("div");
rowDiv.style.lineHeight = 0;
for(var col = 0; col < 10; col++) {
var cellDiv = document.createElement("div");
cellDiv.style.height = "10px";
cellDiv.style.width = "10px";
cellDiv.style.display = "inline-block";
cellDiv.style.backgroundColor = "green";
rowDiv.appendChild(cellDiv);
cellDiv.onmouseover = (function(cell) {
return function() {
cell.style.backgroundColor = "yellow";
};
})(cellDiv);
}
document.getElementById("container").appendChild(rowDiv);
}
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>