2

I have this strange "ghost" little black box at the top left corner if I hover some elements.

So when :hovering the red box all is good and box changes to orange. But then when mouse moves to the green .resize-bar then a blackish box appears at the top left corner. Using Google Chrome Version 59.0.3071.115 on OSX El Capitan 10.11.6

Same problem is reproducible in Opera Version 46.0.2597.32 on macOS.

Where is it coming from? Why is it there and how to remove it?

enter image description here

This is the smallest amount of code needed to reproduce:

.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

caramba
  • 21,963
  • 19
  • 86
  • 127

0 Answers0