google-chrome - 修复了文本超过 html5 视频时顶部导航栏更改字体粗细的问题 - Chrome 中的问题

Question

我有一个我正在本地工作的网站，其中包含一个固定的导航栏和一个高度为 500 像素的 html5 视频元素。导航栏中的菜单项看起来像是字体重量减少或某种 -webkit-font-smoothing: 问题，但只有在视频滚动到导航栏后，字体才会恢复到正确的重量.

这只发生在 chrome 中，它也发生在 Safari 中，但设法使用 font:100%; 解决了这个问题。

任何帮助或建议将不胜感激，因为我整天都在寻找答案。非常感谢。

score 2 · Accepted Answer

当页面上同时发生很多事情时，Webkit 有时会出现实时渲染元素的问题——尤其是在你的 JS 中。将此添加到 CSS 中“粘性”导航的父元素：

/* Change this to your selector */
.someStickyNavParent {
    -webkit-backface-visibility: hidden;
}

如果您仍然遇到该元素的子元素的问题，您可以随时使用通用选择器。

/* Change this to your selector */
.someStickyNavParent * {
    -webkit-backface-visibility: hidden;
}

score 0 · Accepted Answer

我也遇到了同样的问题，没有任何解决办法。

已尝试更改字体，但如果覆盖视频元素，我测试的所有内容都会呈现不同的效果。使用 webkit css 属性（例如 -webkit-font-smoothing 或 -webkit-text-stroke）的解决方法我都没有成功。

当我进行一些搜索时发现，这似乎是关于 Google Chrome 的一个已知问题。

2 回答 2