CLS (Cummulative Layout Shift) в липкой навигации с положением: исправлено

с приходом нового веб-сайта Vitals у меня проблема с моей липкой навигацией / меню. Фактически на большинстве страниц будет :-(

Проблема в том, что я использую такой подход, как аффикс начальной загрузки, чтобы сделать меню липким, когда оно покидает область просмотра. Но каждый раз, когда меню покидает область просмотра (и входит в нее), а позиция устанавливается из relative/static/absolute

к нему увеличивается CLS (Cummulative Layout Shift). Я понимаю, что меняя позицию на fixed приведет к смещению макета, потому что элемент удален из слоя, а все последующие элементы будут перемещены вверх.

НО: Вот почему я придумал несколько решений, и лучшее, на мой взгляд, это то, что я использую обертку с определенной высотой вокруг меню. Таким образом, когда положение меню изменяется на фиксированное, оболочка все еще существует и не изменяется по положению или высоте, что означает, что никакие последующие элементы не должны перемещаться. Но CLS все еще считает. И я не знаю, что делать, чтобы мои меню были липкими, не влияя на CLS, что важно. Кстати, я не могу использовать position: sticky из-за недостаточной поддержки браузера. Потому что мои исследования верны position: sticky

работает, не влияя отрицательно на CLS, мое решение не работает, хотя пользователь ** вообще не видит никакой разницы ** ....

Вот несколько псевдокодов для большей наглядности:

      ...
<body>
   <h1>
      Headline
   </h1>

   <p>
      Here is some elements an stuff
   </p>

   <div class="menu-wrapper">
      <div class="menu">
         <ul>...........</ul>
      </div>
   </div>

   <p>
      More elements and stuff. Nothing shifting because the wrapper always has the same height.
   </p>
...
</body>
...

      .menu-wrapper {
   height: 60px;
   width: 100%;
}

.menu {
   height: 60px;
   width: 100%;
   position: static;
}

.menu.affix {
   position: fixed;
   top: 0;
}

Есть идеи? Большое спасибо!

Источник

1 ответ

Это может быть исправлено в Chrome Canary 90.

Контекст: журнал изменений CLS сообщает о нескольких улучшениях в этом отношении: https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/cls.md:

Журнал изменений кумулятивного сдвига макета

Это список изменений кумулятивного сдвига макета .

Также могут применяться другие исправления из Chrome 89, перечисленные на той же странице.

Источник
Другие вопросы по тегам