title: CSS positioning not working on iOS (iPhone)
body: <p>The following part of the CSS works perfectly when tested in Chrome and Safari (with Developer Preview for iPhone), but for some reason, iPhone in portrait orientation manages to mess up the positioning of the div elements.</p>
  
  <pre><code>#iceberg-bottom {
    width: 63%;
    height: 58vh;
    position: absolute;
    bottom: 0;
    left: 19%;
    background-color: rgba(44, 126, 138, 1);
    border-top-left-radius: 36%;
    border-top-right-radius: 41%;
    overflow: hidden;
    opacity: 0;
  }
  </code></pre>
  
  <p>This is what it looks like in
  <a href="https://i.stack.imgur.com/lxNCT.png" rel="nofollow noreferrer">Responsive Design Mode on Safari on macOS</a></p>
  
  <p>This is what it looks like on my iPhone 6s (without the white borders - I zoomed out just to show you the whole layout - it's not happening because of the zooming out): <a href="https://i.stack.imgur.com/JqnNM.jpg" rel="nofollow noreferrer">iPhone 6s screenshot</a>. The interesting thing is that it works on iPhone 6s in landscape mode without a problem.</p>
  
  <p>The website can be found <a href="http://test1.antoniobritvar.from.hr/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>To me, it looks like the</p>
  
  <pre><code>position: absolute;
  bottom: 0;
  </code></pre>
  
  <p>is not really working properly. What could possibly be the easiest fix?</p>