CSS button click problem

HTML

<p>Click the link on the text baseline, or just above the text.
<p>In Chrome, the link doesn't always register... why?
<p><a href="http://youtu.be/N6UfWdbA1Ac" target="_blank">Here's a YouTube video of this problem in action.</a>

<div id="linkContainer">
    <a class="fatButton" href="#">Click me</a>
</div>
    
<p>Clicks registered: <span id="clicks">0</span>

CSS

#linkContainer {
    background: #eee;
    height: 80px;
}

a.fatButton {
    display: inline-block;
    position: relative;
    margin: 8px;
    padding: 16px;
    background: #faa;
    border-radius: 16px;
    box-shadow: 0 8px 0 0 #f88;
    text-decoration: none;
    color: #000;
}
a.fatButton:active {
    top:8px;
    padding-top:16px;
    box-shadow: none;
}

JavaScript

var c = 0, csp = document.querySelector("#clicks");

document.querySelector("a.fatButton").addEventListener("click", function(e) {
    e.preventDefault();
    
    c++;
    csp.textContent = c;
});