It's surprising that I couldn't find any information about this on Google. This bug is really annoying, and I'm not sure if it can be fixed without an update from Google for their browser.
Description of the issue: When clicking on an element with a hover state, sometimes the hover effect doesn't appear until you either click again or move the mouse.
The problem intensifies when trying it on a custom checkbox, possibly because it triggers a double click. However, the bug still occurs even with a simple div that has a hover effect attached to it.
Everything works perfectly in Firefox and IE.
Please see the video capture with Chrome info:
https://i.sstatic.net/J2T5i.gif
Test it out yourself:
i = 0;
$( ".button" ).click(function() {
i++;
$(".clicks").html(i);
});body {
text-align: center;
}
.button {
background: #252B33;
width: 100px;
height: 100px;
text-align: center;
margin-bottom: 30px;
display: flex;
border-radius: 5px;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.button:hover {
background: #ccc;
cursor: pointer;
}
input {
display: none;
}
.custom_checkbox {
width: 30px;
height: 30px;
background: #5E6569;
border-radius: 50%;
}
input:checked ~ .custom_checkbox {
background: #FF4F68;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
Number of clicks:
<span class="clicks">
0
</span>
<br><br>
<div class="button">
</div>
<label class="button">
<input type="checkbox">
<div class="custom_checkbox">
</div>
</label>