I seem to be facing a similar issue like the one mentioned here: jQuery click event only working after moving the mouse in Chrome, but specifically on Mac OS X (tested on Chrome, Firefox, and Safari). The functionality works fine on Windows (skipping IE for this scenario).
Here is a link to my jsfiddle where the cells darken on hover and change color when clicked, which is the desired behavior. However, on Mac, the color change occurs only after moving the mouse, which is not intended: https://jsfiddle.net/martakule/gh8t2m6n/2/
If I remove the hover effect, everything works smoothly - the color changes instantly upon clicking. Could it be that CSS hover and jQuery click are not compatible on Mac? What could be causing this issue?
td:not(.main):hover {
background: #cccccc;
background: linear-gradient(to bottom right, #cccccc, #a6a6a6);
}