Me deparei com um comportamento um pouco peculiar. Pelo menos parece peculiar para mim.

Você pode conferir aqui:https://fiddle.jshell.net/mxmcd9Lw/8/show/

Principalmente quando a altura de um elemento muda, seu elemento pai rola automaticamente para o topo (você precisa rolar um pouco primeiro). Parece que a parte superior do deslocamento é perdida devido à repintura causada por uma alteração de altura.

estrutura é baseada em CSS Gridbody estouro está definido como ocultorecipiente principal.l-page está definido como 100vhcontêiner rolado.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;
}

Eu tentei:

definindo amboshtml ebody transbordar ocultodefinindo amboshtml ebody height, min-height 100% em diferentes configuraçõeshttps://abdus.co/blog/preventing-vh-jump-on-mobile-browsers/ (método 2)

mas sem sorte.

Tenho certeza de que tem algo a ver com o fato de que o corpo não é rolável e que a altura do recipiente principal está definida como100vh.

Nota No Chrome, ele pula para o topo, no FF e no Safari, na parte inferior.

Qualquer ajuda será muito apreciada.

Valeu!

Lukas