title: Position: absolute behaving differently in safari
body: <p>I am building a responsive website ( <a href="http://dev.searsdavies.co.uk/quadrant-new/" rel="nofollow">http://dev.searsdavies.co.uk/quadrant-new/</a> )</p>
  
  <p>With a layout that requires a set of buttons to sit in the dead centre of the screen for portrait tablets, this layout is triggered at a screen width of 768px and stays in place down to 414px. The buttons are position:absolute on top of all the other content as they need to snap to the bottom on the larger and smaller versions of the site.</p>
  
  <p>The boxes behave perfectly in Chrome and Firefox but safari positions them too high up the page. </p>
  
  <p>Full site is above, here is the relevant CSS</p>
  
  <pre><code>.row.footer {
      bottom: 49%;
      transform: translate(0, 50%);
      position: absolute;
      padding: 0 50px;
  }
  
  .row.full-width {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      max-width: 100%;
  }
  </code></pre>
  
  <p>There is also a conditional query that stops the layout becoming too shallow on landscape phones and similar devices:</p>
  
  <pre><code>@media screen and (max-height: 800px) and (max-width:768px) and (min-width:415px) {
  
          .row.footer {
              top:352px ;
              bottom:auto ;
              transform:none
          }
      }
  
  .side-img {
          height: 50vh;
          min-height: 400px;
          background-size: cover;
          position: relative;
      }
      .main-content {
          height: 50vh;
          min-height: 400px;
      }
  </code></pre>