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

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

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

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

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

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

Same thing the gap will be different depending on browser.