Sticky Footer in ion-content = different margin depending on the browser

#1

Hi,

I’m using a sticky footer inside a component (so inside the ion-content)
I have different margin depending on the browser.
On chrome and native ios Android device the padding seems the same.

But on safari/firefox the footer actually go behind the tabs bar.

Here is a demo and a picture.
StackBlitz demo

Screen Shot 2020-02-11 at 23.51.31
Screen Shot 2020-02-11 at 23.51.312876×1768 264 KB 

#footer {
  position: fixed;
  bottom: 33px;
  width: 100%;
  justify-content : center;
}


  <div id="footer">
    <p>Hello</p>
  </div>
#2

#footer {
position: fixed;
bottom: 10%;
width: 100%;
justify-content : center;
}

try this i am not sure provide css… bottom:10% ; …in percentage

#3

Same thing the gap will be different depending on browser.