网站在 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

我自己也遇到过同样的问题。我只在 safari 上闪烁，所有其他浏览器都可以。

简而言之 - 使用 ems

在媒体查询中，em 和 rem 不应受到 HTML 中字体大小变化的影响，因为它们基于浏览器的内部 font-size 属性 - 但是 safari 似乎不遵循 rems 的这条规则。

例如，默认情况下，最小宽度为 25em 的断点在 400px 处出现，如果将 html 字体大小更改为 2rem，它仍然在 400px 处出现。 将 html 字体大小更改为 2rem 的 25rem 最小宽度断点将在 safari 中以 800px 启动（下面来自 Zell Liew 的示例/文章），这与其他断点不同。

我检查了您的代码并注意到您应用了类似的解决方案，将 rems 切换为 pxs，这会起作用，但您的 pxs 不是很灵活，如果用户增加浏览器字体大小，您的断点将保持不变

/*@media (min-width: 36rem) and (max-width: 47.9375rem) {*/
@media (min-width: 576px) and (max-width: 767px) {

我看到了这篇出色的文章，它进一步解释了事情 https://zellwk.com/blog/media-query-units/

并从他的示例中对此进行了模拟以直观地展示 https://codepen.io/webknit/pen/KYLNVW

Answer 2

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

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