CSS hover & scroll error CHROME - parent element disappears if scrollbar freezes

Question

I have a weird bug in chrome and I tested it in firefox and it works fine.

The problem is that the hover element contains the display: block element inside it, and when scrolling the overflow, if you hover over the scroll, the hidden element disappears. While in firefox, this is normal.

Chrome version: 56.0.2924.87

To reproduce the error below, hover over the scroll bar to play it yourself :

 .on_hover { border: 1px solid red; position: relative; } .hidden_block { display: none; width: 200px; height: 200px; position: absolute; top: 15px; left: 0px; border: 1px solid #ccc; } .hidden_block .overflow_block { position: relative; width: 100%; height: 160px; max-height: 160px; overflow-y: auto; overflow-x: hidden; border: 1px solid blue; } /* On hover display hidden block: */ .on_hover:hover .hidden_block { display: block; } 

 <div class="on_hover"> Hover me <div class="hidden_block"> <div class="overflow_block"> <p>Test the content overflow</p> <p>Test the content overflow</p> <p>Test the content overflow</p> <p>Test the content overflow</p> <p>Test the content overflow</p> <p>Test the content overflow</p> <p>Test the content overflow</p> <p>Test the content overflow</p> <p>Test the content overflow</p> <p>Test the content overflow</p> <p>Test the content overflow</p> </div> </div> </div> 

Does anyone have any solution?

Thank you all

Answer 1

It works well on Chrome 55.0.2883.75, Windows 10. After upgrading to 56.0.2924.87, it does not work. I assume this is a Chrome 56 bug, must be reported to Google!