Hovering preciseness in Chrome
Elements with no height but subpixel offset can be hovered in Chrome, but not Firefox. Bug? Not in spec?
HTML
<ul class="ignorant">
<li>I am ignorant of your pointer. If you see me, something went wrong!</li>
</ul>
<ul>
<li>I am not. Hover me!</li>
</ul>
<ul class="ignorant offset">
<li>I should be ignorant of your pointer. If you see me, something went wrong!</li>
</ul>
CSS
ul {
max-height: 1px;
overflow: hidden;
margin: 10px;
padding: 0;
border: 10px solid #bada55;
list-style-type: none;
transition: border-color .4s;
}
ul:hover {
max-height: 100px;
border-color: #de2d26;
}
ul > li {
max-height: 1px;
padding: 10px;
pointer-events: auto;
}
.ignorant {
pointer-events: none;
}
.offset {
position: relative;
}