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

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

这在所有浏览器中都可以正常工作，但在中型和较小屏幕上的野生动物园除外。问题是页面开始像放大和缩小一样闪烁。检查显示在标签中添加了：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%;
    }
}

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

我的问题是


为什么会这样呢？
什么可能是此问题的根本原因以及如何解决？

最佳答案

媒体查询rem单位基于html字体大小。因此，当一个改变时，另一个也会改变，从而引起循环或反弹效果。

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

关于jquery - 网站在Safari中以较小的屏幕尺寸不断闪烁，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50976078/