Tengo una aplicación web React donde el componente de pie de página fijo crea un comportamiento inesperado, pero solo en Firefox-mobile. Funciona bien en Chrome/Firefox de escritorio y también en Chrome-mobile y Safari.

pie de página

 <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); }

la cuestión

Lo que he intentado hasta ahora después de algunas investigaciones sobre problemas similares como prueba y error:

• etiqueta de anclaje eliminada
• agregue min-width en lugar de solo ancho
• en lugar de React-Bootstrap Container usó un div
• índice z añadido
• transformar: traducir3d (0px, 0px, 0px);
• webkit-transform: translateZ(0);
• altura: automático y también establece la altura mínima y máxima