совокупный сдвиг макета и jquery

Question

Я использую materialize css 0.100.2 и просматриваю CLS на своем веб-сайте. Я определил, что проблема заключается в следующем фрагменте кода:

      $(window).resize(function() {
      $('.lt-slider').height($(window).height() + 15).css('position', 'relative');
  });

С этим кодом мой CLS равен 1,13, если я удалю его 0,039, но я потеряю кусок экрана, так что контент исчезнет за ползунком, есть ли решение, чтобы сохранить контент и уменьшить CLS.

Answer 1

Я нашел это опубликованное Джеральдом:

Сначала создайте класс antiCls и добавьте его в свой собственный CSS (в элементе HEAD) следующим образом:

      .antiCls { 
    visibility: hidden;
}

затем используйте этот бит javascript:

      var cls = document.getElementsByClassName('antiCls'),
    i = cls.length;
    
for (i = 0; i < cls.length; i++) {
    cls[i].style.visibility = "visible";
    } 

затем я добавил класс к каждому элементу, на который повлияло правило «Избегайте больших сдвигов макета» в lighthouse, вам может потребоваться протестировать каждый элемент, к которому применен класс antiCls, но он работал

Answer 2

Я немного углубился в свою проблему, насколько я могу судить, это связано с материализацией CSS и версией jquery. Я пробовал .097 0.100.2 и 1.00, все с теми же результатами, CLS составляет 0.4, если я использую jquery 2.2.4, но если я использую jquery 3 и выше, CLS стреляет до 1.4, но если я использую материализацию CSS версии 1 и использую javascript, CLS падает, и я могу использовать приведенное выше, чтобы уменьшить до 0