Google Chrome上有ghost元素：悬停

Question

如果我悬停一些元素，我在左上角有一个奇怪的“鬼”小黑盒子。

所以当:hovering红色框全部好，框变为橙色时。但是当鼠标移动到绿色.resize-bar时，左上角会出现一个黑色框。在OSX El Capitan 10.11.6上使用Google Chrome版本59.0.3071.115

在macOS上的Opera版本46.0.2597.32中可以重现相同的问题。

它来自哪里？它为什么存在以及如何删除它？

这是重现所需的最少代码量：

.scrollable {
    overflow-y: scroll;
}

.grid {
    width: 100px;
}

.grid div[class*='col-'] {
    position: relative;
    padding: 15px;
}

.resize-bar {
    position: absolute;
    right: 0;
    top: 0;

    height: 100%;
    width: 5px;
    background-color: green;
}

.col-1-4 {
    background-color:red;
}

.col-1-4:hover {
    background-color: orange;
}

<div class="grid">
    <div class="col-1-4 scrollable">
        <span class="resize-bar"></span>
    </div>
</div>

And here is a fiddle if anyone has time to play with it