Button element not firing click event when clicking on button text and releasing off it (but still inside the button)?

On WebKit browsers (I tested on Chrome and Safari on Mac), button element behaves weird:

Wen in this fiddle http://jsfiddle.net/5ReUn/3/ you do the following:

1. Press left mouse button while the cursor is over HTML button text
2. Move the cursor (while pressed) to an area of the button without text
3. Release the mouse button

Then the click event on the button element is not fired!

HTML is very simple:

<button id="button">Click</button>

And the CSS is not sophisticated at all:

button {
    display: block;
    padding: 20px;
}

JS for click catching:

button = document.getElementById('button');
button.addEventListener('click', function() {
    console.log('click');
});

Many visitors to my site complain that buttons are not clickable. They don’t realize they are moving the cursor while clicking.

Has anybody found a workaround for this?

Answer

It turns out to be a bug in WebKit.

An quick non-JavaScript solution is to wrap the text in a SPAN element and make it click-through:

<button>
    <span>Click Me</span>
</button>

Example CSS:

span {
    display: block;
    padding: 20px;
    pointer-events: none;   // < --- Solution!
}

Since the bug appears only in WebKit, browsers that don’t support pointer-events can be ignored.