html - Safari 溢出/可见性和溢出/显示错误(元素仍然可见)

Question

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

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

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

好像是父元素的overflowhidden/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>