Safari溢出/可见性和溢出/显示错误（元素仍然可见）

Question

我在Safari浏览器渲染中遇到了一个奇怪的错误。

当我将鼠标悬停在使其子元素（粉红色.hover）可见的元素（绿色.pop）上时，即使在悬停结束后，该子项仍然可见。它是可见的但不可选择 - 我可以在子元素“后面”选择文本，如下面的屏幕截图所示。

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;
}

这似乎是由更改父元素的overflow hidden / visible以及更改display none / block引起的（或visibility hidden/visible）子元素。我使用JavaScript遇到了这个错误，但仅仅是CSS :hover可以重现它。

在Safari 8.0.6 （10600.6.3）和 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

我唯一可以解决的问题是opacity与pointer-events一起使用。我希望opacity: 0; pointer-events: none的行为方式与visibility: hidden相同。

但我仍然不确定这是否是正确的做法......

相应的CSS是：

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