Chrome：点击后没有悬停状态，随机发生

Question

Can't believe I didn't find anything about it on google, such an annoying bug, not sure if it even can be fixed without google updating their browser.

Problem description: After clicking on an element which has hover state attached to it, at randomly, the hover state doesn't appear until you re-click or move the mouse.

And it gets worse if you try it on a custom checkbox, I guess it's somehow related to the fact that it creates a double click. But still the bug appears even with a plain div that has hover attached to it.

All works fine in Firefox and IE.

Video capture with chrome info:

Test 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>

Answer 1

After doing "end task" on google chrome, the problem seems to have disappeared. I did try to close and start the browser before, but only doing the end-task helped.

It must be related to trash collector as I had the browser running and in use daily for a week or so (at nights putting computer to sleep (Windows 8.1)).

Will let you know if it should reappear.