jquery - 网站在 safari 中以较小的屏幕尺寸不断闪烁

Question

我有这个网站https://www.scit.com.br/

这在除 safari 之外的所有浏览器中都能正常工作 在中等和较小的屏幕上。问题是页面开始像放大和缩小一样闪烁。检查显示在标签中添加了重复的 :before 和 :after 。这是由 style.css 文件引起的。我尝试删除所有 js 文件，因此 JS 不是罪魁祸首。

稍后通过试错删除代码。我发现下面的 css 导致了这个问题

style.css 行:2080、2118、2156、2203

@media (min-width: 36rem) and (max-width: 47.9375rem) {
    html {
        font-size: 85%;
    }
}

@media (min-width: 48rem) and (max-width: 61.9375rem) {
    html {
        font-size: 90%;
    }

}

@media (min-width: 62rem) and (max-width: 74.9375rem) {
    html {
        font-size: 95%;
    }

}


@media (min-width: 75rem) {
    html {
        font-size: 100%;
    }
}

如果我删除这些样式，它就会起作用。

我的问题是

• 为什么会这样？

• 此问题的根本原因可能是什么以及如何解决？

Answer 1

您的媒体查询 rem 单位基于您的 html 字体大小。因此，当一个发生变化时，另一个也在发生变化，从而导致循环或反弹效应。

要解决此问题，您可以更改字体大小以针对 html 元素以外的内容，例如 body。