Hola a todos,
Estoy intentando ajustar la navegación lateral de mi tienda PrestaShop para dispositivos móviles, basándome en el tema Classic. El objetivo es que el menú se deslice suavemente y tenga un efecto de desenfoque (backdrop-filter: blur) en el fondo del contenido principal de la página, para que el menú resalte mejor.
El problema principal es el espaciado vertical, especialmente en iOS Safari, donde la barra de direcciones superior e inferior hace que el 100vh o 100dvvh se comporte de forma inconsistente, provocando un salto al hacer scroll o al abrir el teclado. Además, el backdrop-filter no siempre se aplica correctamente o se ve entrecortado.
Este es el CSS que estoy probando en themes/classic/assets/css/custom.css:
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100dvvh; /* Esto es lo que me da problemas en iOS */
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px); /* No se aplica siempre o se ve mal */
-webkit-backdrop-filter: blur(8px);
z-index: 999;
¿Alguna idea de cómo puedo estabilizar el height y hacer que el backdrop-filter funcione consistentemente en PS 8.0.4?
Gracias!