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 ![]()
(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)