Encontré algo raro. Los navegadores de escritorio y móviles no funcionan de la misma manera con respecto al botón Atrás.
Tengo una superposición de menú de hamburguesas, cuando hago clic en él, se abre (posición absoluta DIV). Cuando hago clic en el enlace dentro de esta superposición, en el escritorio, va a la nueva página. El botón Atrás vuelve a traer la página anterior, SIN la superposición. Este es mi comportamiento esperado.
Pero como he visto, en dispositivos móviles (al menos en Chrome, pero creo que también en otros), cuando tengo la superposición abierta y hago clic en un enlace, llego a la nueva página, pero al volver llego a la página anterior. con la superposición TODAVÍA ABIERTA. Estaría bien, SI al volver a hacer clic se cerraría la superposición, pero no es así. Va a la página en la que estaba antes de hacer clic en el menú de hamburguesas o salir del sitio, si eso fue lo primero que hice...
Ahora puedo manejar esto de 2 maneras:
Puedo cerrar la superposición al hacer clic en un enlace dentro del menú. Cuando hice eso, la superposición se cierra y llego a la página siguiente. Atrás me devuelve a la página anterior sin superposición. Hasta ahora, todo bien, PERO... en el escritorio, cuando hago clic y accedo a una nueva página de esta manera, tengo que hacer clic dos veces para volver a la página anterior. Entonces eso no es bueno.
De alguna manera puedo hacer que el botón Atrás cierre la superposición primero y la siguiente vuelta retroceda una página, pero eso parece aún más sucio que la primera opción que maneja los estados de inserción, etc.
Como veo muchos sitios han resuelto esto. En dispositivos móviles, al hacer clic en el enlace dentro del menú de hamburguesas (o en algún otro "menú emergente" con menús) se accede a una nueva página y al hacer clic en Atrás se vuelve a la página anterior con la hamburguesa cerrada. El mismo comportamiento está en el escritorio, no es necesario hacer doble clic en la parte posterior.
¿Alguien sabe cómo debo manejar esto y si alguien sabe por qué los navegadores móviles no cierran la superposición en primer lugar al hacer clic dentro de ella o hay alguna configuración fácil que pueda desencadenar este comportamiento?
Tuya
alemán
Parece que acaba de descubrir una característica del navegador llamada "bfcache". He experimentado problemas similares una vez y me tomó horas averiguar qué estaba pasando.
La implementación es inconsistente en todos los navegadores (así como en sus versiones móviles y de escritorio) y las solicitudes en segundo plano realizadas por la página. Requiere una cierta cantidad de optimización de la página si se necesita un comportamiento de avance/retroceso del historial consistente. No estoy 100% seguro de si ese es el problema aquí, ya que te falta un ejemplo reproducible mínimo , pero es posible que desees investigar en esa dirección.
Una de las mejores guías sobre cómo manejar el almacenamiento en caché hacia adelante y hacia atrás es esta de Google Developers .
La caché de retroceso/adelante (o bfcache ) es una optimización del navegador que permite la navegación instantánea hacia adelante y hacia atrás. Mejora significativamente la experiencia de navegación de los usuarios, especialmente aquellos con redes o dispositivos más lentos.
Como desarrolladores web, es fundamental entender cómo optimizar sus páginas para bfcache en todos los navegadores, para que sus usuarios puedan aprovechar los beneficios.
El "caché" que usa bfcache es diferente del caché HTTP (que también es útil para acelerar las navegaciones repetidas). El bfcache es una instantánea de la página completa en la memoria (incluido el montón de JavaScript), mientras que el caché HTTP contiene solo las respuestas de las solicitudes realizadas anteriormente.
– web.dev