Me encontré con un comportamiento un poco peculiar. Al menos me parece peculiar.

Puede verificarlo aquí:https://fiddle.jshell.net/mxmcd9Lw/8/show/

Principalmente cuando la altura de un elemento cambia, su elemento principal se desplaza automáticamente hacia la parte superior (primero debe desplazarse hacia abajo un poco). Parece que la parte superior compensada se pierde debido al repintado causado por un cambio de altura.

estructura se basa en CSS Gridbody desbordamiento se establece en ocultocontenedor principal.l-page se establece en 100vhcontenedor desplazado.l-content

 body {
  overflow-y: hidden;
}

.l-page {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas: 'primary_bar primary_bar' 'sidebar notification' 'sidebar secondary_bar' 'sidebar content';
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  min-width: 1280px;
  max-width: 1920px;
}

.l-notification {
  grid-area: notification;
}

.l-primary-bar {
  grid-area: primary_bar;
  z-index: 2;
}

.l-secondary-bar {
  grid-area: secondary_bar;
  z-index: 1;
}

.l-sidebar {
  grid-area: sidebar;
  width: 180px;
}

.l-content {
  grid-area: content;
  overflow-x: hidden;
  z-index: 0;
}

Lo intenté:

configurando amboshtml ybody desbordarse ocultoconfigurando amboshtml ybody height, min-height al 100% en diferentes configuracioneshttps://abdus.co/blog/preventing-vh-jump-on-mobile-browsers/ (método 2)

Pero sin suerte.

Estoy seguro de que tiene algo que ver con el hecho de que el cuerpo no es desplazable y que la altura del contenedor principal está configurada en100vh.

Nota En Chrome, salta a la parte superior, en FF y Safari a la parte inferior.

Cualquier ayuda será muy apreciada.

¡Gracias!

Lukas