I have a React web-app where the fixed footer component creates some unexpected behaviour but only on Firefox-mobile. Its working well on desktop Chrome/Firefox and also on Chrome-mobile and Safari.

footer

<Container className="footer-container">
      <a style={{textDecoration: "none"}} href="/#" onClick={handleClick}>Andras <span role="img" aria-label="heart">🧡</span> </a>
    </Container>

css

.footer-container {
  position: fixed;
  text-align: center;
  left: 0;
  bottom: 0;
  right: 0;
  padding-top: 3px;
  padding-bottom: 1px;
  max-width: 400px;
  border-width: thin;
  border-top-style: solid;
  border-color: #ccc;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-image:
    radial-gradient(#363b41,
      #353535);
}

the issue

What I've tried so far after some research on similar issues as trial and error:

• removed anchor tag
• add min-width instead of width only
• instead of React-Bootstrap Container used a div
• added z-index
• transform: translate3d(0px, 0px, 0px);
• webkit-transform: translateZ(0);
• height: auto and also set both min and max height