CSS悬停和滚动错误CHROME - 如果滚动条悬停,则父元素消失

Question

我在chrome中有奇怪的错误,而我在firefox中测试它并且它工作正常.

问题是将display: block元素放在其中的悬停元素,当有溢出滚动时,如果将鼠标悬停在滚动上,隐藏元素将消失.虽然在Firefox中它没关系.

Chrome version: 56.0.2924.87

错误的重现如下,将鼠标悬停在滚动条上以自行重现:

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

有人解决了吗？

谢谢你们

Answer 1

它在 Chrome 55.0.2883.75、Windows 10 上运行良好。更新到 56.0.2924.87 后，它不起作用。我猜这是Chrome 56版本的一个bug，有必要向Google报告！