title: Are there any workaround to avoid SFSafariViewController from hiding fixed position headers?
body: <p><a href="https://developer.apple.com/documentation/safariservices/sfsafariviewcontroller" rel="noreferrer">SFSafariViewController</a> has this bug that is not reproducible in Safari. </p>
  
  <p>Regularly it will obscure the top of a fixed panel behind the site name / done chrome. </p>
  
  <p>This happens cause internally it loses sync between actual height of the page and size of the shrinking header chrome. </p>
  
  <h3>Good small header</h3>
  
  <p><a href="https://i.stack.imgur.com/jqAgm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jqAgm.png" alt="correct small header"></a></p>
  
  <h3>Bad small header (SF chrome should be small but it is big)</h3>
  
  <p><a href="https://i.stack.imgur.com/P1PyF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/P1PyF.png" alt="sad"></a></p>
  
  <h3>Good large header</h3>
  
  <p><a href="https://i.stack.imgur.com/56grD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/56grD.png" alt="correct big header"></a></p>
  
  <p>This issue was reported elsewhere at: <a href="https://meta.stackexchange.com/questions/279792/new-ios-chat-headers-occasionally-hide-behind-safari-navigation-controls-when-vi">https://meta.stackexchange.com/questions/279792/new-ios-chat-headers-occasionally-hide-behind-safari-navigation-controls-when-vi</a> and is an issue in iOS 9 and up (still an issue in 12.0.1) </p>
  
  <p>To reproduce make a dummy app with SFViewController and navigate to a site with a fixed header such as bbs.boingboing.net then click around and browse a few topics. </p>
  
  <p>Since this bug is now a couple of years old I am wondering if there is some sort of workaround that does not involve adding a general padding to the top of the header? </p>
  
  <h3>Minimal repro</h3>
  
  <p>Make a page with this HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;style&gt;
        body {
          height: 2000px;
          background-color: green;
        }
        header {
          width: 100%;
          height: 50px;
          background-color: red;
          color: white;
          position: fixed;
          top: 0;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;header&gt;Hello&lt;/header&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Open in SafariViewController (host it somewhere online and then email a link, gmail app in iOS uses Safari View Controller, Discourse app as well) </p>
  
  <p>Scroll quickly to the bottom</p>
  
  <p>Half the header is hiding. </p>
  
  <p>Insets make no difference inset for top is 0, cover viewport property makes no diff. </p>