时间戳

首页 > 解决方案 > 网站在 Safari 中以较小的屏幕尺寸不断闪烁

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

问题描述

我有这个网站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%;
    }
}

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

我的问题是

标签： jqueryhtmlcssmacossafari

解决方案

我刚刚遇到这个页面，我自己也遇到过同样的问题。我只在 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

推荐阅读