La navegación anclada se desplaza en una posición incorrecta

Hay unos temas que usan la navegación anclada, la cual hace que no se cargue una nueva página cuando haces clic en un enlace de navegación; en cambio, la página se desplaza hacia una sección específica en la misma página. Ese tipo de navegación es popular en algunos tipos de página de aterrizaje (“one-pager”).

El error: el objetivo del desplazamiento falla

  • LazyLoad está habilitado WP Rocket.
  • Haz clic en cualquier enlace de navegación que se supone desplace la página hacia un objetivo que se encuentra abajo de la página (fuera de la ventana gráfica).
  • El desplazamiento automático se interrumpe en una posición incorrecta: el objetivo del desplazamiento ha fallado.

Solución: desactivar el LazyLoad

La solución para corregir este comportamiento es desactivar LazyLoad, por lo menos en las páginas que incluyen una navegación anclada.
 Deshabilitar LazyLoad en páginas/artículos específicos

¿Porqué ocurre esto?

Los objetivos de desplazamiento se calculan sobre la carga de la página de parte del navegador. Una vez que la página se haya cargado completamente, el navegador “sabe” la posición de cada uno de los objetivos de desplazamiento, y en cuanto hagas clic sobre un enlace del menu, se puede desplazar en la posición exacta.

Sin embargo, cuando el LazyLoad está activo, las imágenes fuera de la ventana gráfica no se cargan directamente. Esto hace que los elementos que el navegador ha calculado al momento de la carga de la página están distorsionados.

Una vez que empieces a desplazar la página, las imágenes en carga perezosa aparecen y se añaden a la altura total del documento: los elementos de los cuales tu navegador “conocía” las posiciones antes, están empujados más abajo de la página.