title: 1px gap of absolute positioned element with transform: translate on Safari only
body: <p>There is a full width container that contains inner box which are centered inside the container. There is a 100% width absolute positioned box inside the box. To the box also applied transform: translate().</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="cover-holder"&gt;
      &lt;div class="cover"&gt;
          &lt;div class="cover__overlay"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.cover-holder {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
  }
  
  .cover {
    width: 206px;
    height: 206px;
    background: white;
    position: relative;
    overflow: hidden;
    align-self: center;
  }
  
  .cover__overlay {
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transition-duration: 0.3s;
    transform: translate3d(0, 50%, 0);
  }
  
  .cover:hover .cover__overlay {
    transform: translate3d(0, 0, 0);
  }
  </code></pre>
  
  <p><strong>Problem:</strong></p>
  
  <p>On odd sizes of window there is appeared 1px gap (or transparent "border") on Safari browser only:</p>
  
  <p><a href="https://i.stack.imgur.com/YiVQr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YiVQr.png" alt="safari"></a></p>
  
  <p><strong>Expected result (how it looks on Chrome, Firefox and IE):</strong></p>
  
  <p><a href="https://i.stack.imgur.com/mXLpm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mXLpm.png" alt="enter image description here"></a></p>
  
  <p><a href="https://jsfiddle.net/milax/sqpuc9qc/7/" rel="nofollow noreferrer">Demo in JSFiddle</a></p>