--header-offset es lento en Safari con elementos fijos (iPadOS 15.6)

Elementos fijos (CSS position: sticky) en Discourse siempre han sido un poco inestables en mi iPad (9ª generación, todo actualizado). Tiemblan un poco al desplazarse, reaccionan mal, con retrasos, a cambios bruscos en la dirección del desplazamiento.

Con la introducción de la nueva barra lateral (también un elemento fijo), se volvió más molesto, ya que es una parte considerable de la interfaz de usuario que no es muy estable.

El culpable es la variable --header-offset. Eliminar esta variable en CSS hace que los elementos fijos de la interfaz de usuario sean estables, como deberían ser.

El encabezado tiene una altura de 4em por defecto. Reemplacé la variable --header-offset en CSS para la línea de tiempo, el avatar fijo y la barra lateral con 4em para calcular su posición:

.d-header
{
    box-sizing: border-box;
    height: 4em;
}

.sidebar-wrapper
{
    top: 4em;
    height: calc(100vh - 4em);
}

@media screen and (min-width: 925px)
{
.container.posts .topic-navigation
    {
        top: 6em;
    }
}

.topic-post.sticky-avatar .topic-avatar
{
    top: 3.75em;
}

(box-sizing está ahí porque tengo un borde en mi encabezado, no relacionado)

Tengo curiosidad sobre la función de esta variable, el encabezado nunca cambia de altura, que yo sepa, aparte de cambiar el tamaño del texto, y usar em para su altura se encarga de eso.

No sé si hay alguna forma de optimizar --header-offset en Safari móvil, pero mi solución alternativa soluciona este pequeño problema de rendimiento. Discourse se ve mucho más pulido cuando los elementos fijos son realmente fijos :slight_smile:

(No tengo ningún problema con estos elementos en Firefox o Chrome en mi escritorio, por lo que podría ser un error de Safari)

1 me gusta

Esto tiende a estar relacionado con temas personalizados, pero como notaste, también hay casos como el tamaño de fuente que pueden afectar la altura del encabezado. En los casos en que el encabezado es más alto o más bajo que el predeterminado, calculamos el desplazamiento del encabezado en JS para ajustar otros elementos en la página para que no queden debajo del encabezado.

De todos modos, puedo ver el problema, esto es definitivamente discordante:

pero si establezco --header-offset a un valor estático en CSS:

¿Quizás calculamos y actualizamos el desplazamiento con demasiada frecuencia? Haremos algunas investigaciones… Safari en iOS realiza muchas optimizaciones que podrían estar causando problemas.

4 Me gusta

He añadido una corrección para esto: FIX: Calculate header offset once on load by pmusaraj · Pull Request #18669 · discourse/discourse · GitHub

Pruébalo y hazme saber si soluciona tus problemas, @vincefrommtl.

7 Me gusta

Esto funcionó perfectamente, muchas gracias :slight_smile:

2 Me gusta

Este tema se cerró automáticamente después de 4 días. Ya no se permiten nuevas respuestas.