title: How to know when bottom nav-bar is visible in mobile safari?
body: <p>So i have this problem where clicking a fixed button on the bottom of the page slides the page up revealing the bottom navigation bar in mobile safari, requiring the button to be clicked a second time in order to work. Adding a <code>margin-bottom: 50px;</code> to the button fixes this but when the page is scrolled the margin is a bit much because the nav-bar slides down. </p>
  
  <p>using <code>safe-area-inset</code> as margin does not fix the problem. Using it as padding fixes it but it also stretches the element all the way to the bottom of the screen</p>
  
  <p>i also tried the following code, this is supposed to keep the nav bar from hiding. This works but it messes with the window scroll calculations and fixed position elements so it does not solve my problem.</p>
  
  <pre><code>html,body{
  
  height: 100%;
  
  overflow-y: scroll;
  
  -webkit-overflow-scrolling: touch;
  }
  </code></pre>
  
  <p>Would there be any way to know when the bottom nav bar is visible/hidden using javascript or jquery in mobile safari or any workaround to fix this problem?</p>