title: Sticky position not working with safari mobile
body: <p>I want my navbar to be sticky. The css works fine with Chrome on my desktop but when I try to view it on my iPhone the navbar no longer sticks. I've tried to mess with the body overflow and applying the sticky position on other elements but can't get it to work. Not sure what is wrong or what to do to fix this. I am using Angular 6 for my app and would like to avoid using JS or Jquery to solve this issue.</p>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;div class="contact-info"&gt;&lt;/div&gt;
  
  &lt;app-navbar&gt;
    &lt;div class="outer"&gt;
      &lt;div class="inner"&gt;
        &lt;nav class="navbar"&gt;
          my navbar links......
        &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/app-navbar&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;app-footer-bar&gt;&lt;/app-footer-bar&gt;
  </code></pre>
  
  <p><strong>navbar.component.css</strong></p>
  
  <pre><code>.outer {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    background-color: white;
    width: 100%;
    z-index: 9;
  }
  </code></pre>