Chrome不会完全渲染阴影，除非将鼠标悬停在阴影上

Question

我在Chrome渲染阴影框时遇到了一些奇怪的问题。     https://jsfiddle.net/8urkLkyf/10/

.bubble {
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
    word-break: break-all;
    margin-left:89px;
    margin-right:89px;
    margin-top:10px;
    margin-bottom:10px;
}

当您打开accordio时，消息气泡周围应该有阴影。 但是当它被打开时，它不会被渲染，但当你将鼠标悬停在用户名上时，阴影就会显示出来。

这不是在firefox下发生的.. 该代码最初借用于： How can I fix this alignment with CSS when using bootstrap?

更新： 我发现了一个类似的问题，但还没有和我一样工作： CSS box shadow conflicting with pseudo-element