title: Safari overflow/visibility and overflow/display bug (element remains visible)
body: <p>I've come across a strange bug in Safari browser rendering.</p>
  
  <p>When I hover over element (green <code>.hover</code>) which makes its child element (pink <code>.pop</code>) 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.</p>
  
  <p><a href="https://i.stack.imgur.com/R0yzV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R0yzV.png" alt="enter image description here"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="hover"&gt;
      Hover me! (display)
  
      &lt;div class="pop pop--display"&gt;
          I will cover your content in Safari indefinitely
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="content"&gt;
      Content
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>It seems to be caused by changing <code>overflow</code> <code>hidden</code>/<code>visible</code> of the parent element together with changing of <code>display</code> <code>none</code>/<code>block</code> (or <code>visibility</code> <code>hidden/visible</code>) of the child element. I came across this bug using JavaScript but mere CSS <code>:hover</code> can reproduce it.</p>
  
  <p>Tested on Safari <strong>8.0.6</strong> (10600.6.3) and <strong>9.0.1</strong> (11601.2.7.2).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test"&gt;                                                                          
      &lt;div class="hover"&gt;                                                                     
          Hover me! (default)                                                                 
      
          &lt;div class="pop"&gt;                                                                   
              I will cover your content in Safari indefinitely                                
          &lt;/div&gt;                                                                              
      &lt;/div&gt;
      
      &lt;div class="content"&gt;                                                                   
          Content                                                                             
      &lt;/div&gt;                                                                                  
  &lt;/div&gt;                                                                                      
  
  &lt;div class="test"&gt;                                                                          
      &lt;div class="hover"&gt;                                                                     
          Hover me! (display)                                                                 
  
          &lt;div class="pop pop--display"&gt;                                                      
              I will cover your content in Safari indefinitely                                
          &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class="content"&gt;                                                                   
          Content                                                                             
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="test"&gt;                                                                          
      &lt;div class="hover"&gt;                                                                     
          Hover me! (visibility)                                                              
  
          &lt;div class="pop pop--visibility"&gt;                                                   
              I will cover your content in Safari indefinitely                                
          &lt;/div&gt;                                                                              
      &lt;/div&gt;                                                                                  
  
      &lt;div class="content"&gt;                                                                   
          Content                                                                             
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>