title: Safari fixed/absolute relative to bottom-right
body: <p>Here is the CSS for my wrapper and my h3</p>
  
  <pre><code>#introWrap {
      width: 100% !important;
      height: 100% !important;
      min-width: 100%;
      min-height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 100;
      overflow: hidden;
  }
  
  #introWrap h3 {
      height: 200px;
      width: 800px;
      position: absolute;
      top: calc(100% - 200px);
      left: calc(100% - 800px);
  }
  </code></pre>
  
  <p>On Chrome/Firefox the <code>h3</code> appears at the correct position (bottom-right). On Safari for some reason he doesn't understand that CSS and defaults to top-left (0 - 0).</p>
  
  <p>I have tried every combination of positions fixed/absolute, I tried using <code>vh</code> and <code>vw</code> instead of %. Can't seem to force Safari to position <code>h3</code> correctly.</p>
  
  <p>You can see it in action <a href="http://rlcoaching.com/albaraka/" rel="nofollow">here</a> (h3 is the bigger text in the "intro", you'll notice it appears bottom right on all browsers except Safari)</p>
  
  <p>EDIT: In response to one of the comments here is the HTML:</p>
  
  <pre><code>&lt;section id="introWrap"&gt;
      &lt;div class="main"&gt;
          &lt;h1&gt;Title&lt;/h1&gt;
          &lt;h2&gt;Subtitle&lt;/h2&gt;
      &lt;/div&gt;
      &lt;h3&gt;Title&lt;/h3&gt;
      &lt;h4&gt;Title&lt;/h4&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>I don't think it's entirely relevant to the problem though. h1 h2 and h4 are not positioned relative to the 100% document height/width so they appear juste fine. Positioning h3 to the bottom right though just doesn't work this way in Safari.</p>