累积布局移位和jquery

问题描述

我正在使用 materialize css 0.100.2 并且一直在我的网站上查看 CLS 我已经确定问题是这段代码：

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

使用此代码后，如果我将其删除为 0.039，我的 CLS 为 1.13，但我松开了一大块屏幕，以便内容消失在滑块后面是否有解决方案可以保留内容并减少 CLS。

解决方法

我发现这是杰拉德发布的：

首先，创建一个类“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";
    } 

然后我将类添加到灯塔中受“避免大布局偏移”影响的每个元素中，您可能需要测试应用了 antiCls 类的每个元素，但它有效

,

我一直在深入研究我的问题，据我所知，它与 Materialize CSS 和 jquery 版本有关。我已经尝试了 .097 0.100.2 和 1.00，结果都相同，如果我使用 jquery 2.2.4，CLS 为 0.4，但如果我使用 jquery 3 及更高版本，CLS 最高可达 1.4，但如果我使用 materialize CSS 版本 1 并使用javascript CLS 下降，我可以使用上面的方法减少到 0