Safari overflow/visibility and overflow/display bug (element remains visible) - html

Question

I've come across a strange bug in Safari browser rendering.
When I hover over element (green .hover) which makes its child element (pink .pop) visible, the child stays visible even after the hover has ended. It's visible but not selectable - I can select text "behind" the child element as you can see in the screenshot below.
HTML:
<div class="hover">
Hover me! (display)
<div class="pop pop--display">
I will cover your content in Safari indefinitely
</div>
</div>
<div class="content">
Content
</div>
CSS:
.hover {
position: relative;
overflow: hidden;
}
.pop {
position: absolute;
top: 80%;
left: 10px;
}
.hover:hover {
overflow: visible;
}
.pop--display {
display: none;
}
.hover:hover .pop--display {
display: block;
}
It seems to be caused by changing overflow hidden/visible of the parent element together with changing of display none/block (or visibility hidden/visible) of the child element. I came across this bug using JavaScript but mere CSS :hover can reproduce it.
Tested on Safari 8.0.6 (10600.6.3) and 9.0.1 (11601.2.7.2).
/* basic styling and formating */
.hover {
padding: 10px 0;
width: 200px;
background: green;
}
.pop {
padding: 20px;
height: 90px;
width: 140px;
background: pink;
}
.content {
width: 200px;
padding-top: 20px;
height: 100px;
background: grey;
}
.test + .test {
margin-top: 30px;
}
/* overflows and positioning */
.hover {
position: relative;
overflow: hidden;
}
.pop {
position: absolute;
top: 80%;
left: 10px;
}
.hover:hover {
overflow: visible;
}
/* variations */
.pop--display {
display: none;
}
.hover:hover .pop--display {
display: block;
}
.pop--visibility {
visibility: hidden;
}
.hover:hover .pop--visibility {
visibility: visible;
}
<div class="test">
<div class="hover">
Hover me! (default)
<div class="pop">
I will cover your content in Safari indefinitely
</div>
</div>
<div class="content">
Content
</div>
</div>
<div class="test">
<div class="hover">
Hover me! (display)
<div class="pop pop--display">
I will cover your content in Safari indefinitely
</div>
</div>
<div class="content">
Content
</div>
</div>
<div class="test">
<div class="hover">
Hover me! (visibility)
<div class="pop pop--visibility">
I will cover your content in Safari indefinitely
</div>
</div>
<div class="content">
Content
</div>
</div>

Answer 1

The only solution I could came to is to use opacity with pointer-events. I expect opacity: 0; pointer-events: none to act the same way as visibility: hidden.
But I'm still not sure if this is a right approach...
The corresponding CSS is:
.pop--opacity {
opacity: 0;
pointer-events: none;
}
.hover:hover .pop--opacity {
opacity: 1;
pointer-events: auto;
}
/* basic styling and formating */
.hover {
padding: 10px 0;
width: 200px;
background: green;
}
.pop {
padding: 20px;
height: 90px;
width: 140px;
background: pink;
}
.content {
width: 200px;
padding-top: 20px;
height: 100px;
background: grey;
}
.test + .test {
margin-top: 30px;
}
/* overflows and positioning */
.hover {
position: relative;
overflow: hidden;
}
.pop {
position: absolute;
top: 80%;
left: 10px;
}
.hover:hover {
overflow: visible;
}
.pop--opacity {
opacity: 0;
pointer-events: none;
}
.hover:hover .pop--opacity {
opacity: 1;
pointer-events: auto;
}
<div class="test">
<div class="hover">
Hover me! (opacity)
<div class="pop pop--opacity">
I will cover your content in Safari indefinitely
</div>
</div>
<div class="content">
Content
</div>
</div>