在 Chrome 中应用 z-index 后，文本变得非常模糊

Posted 2023-02-22

【中文标题】在 Chrome 中应用 z-index 后，文本变得非常模糊

【英文标题】：Text becomes very slightly blurry after applying z-index in Chrome

【发布时间】：2017-12-19 09:34:36

【问题描述】：

我在页面上有带有文本的元素。我注意到与 Firefox 相比，Chrome 中的文本实际上非常模糊。当我从元素中删除 z-index 时，文本变得更清晰。 如何在不删除 z-index 的情况下使文本清晰。

这是一个 html 代码：

<div class="navigation navigation-fixed">
    <div class="navigation-infouser">
    <a href="/bohdan.andriyiv"><span>Bohdan Andriyiv</span></a>
    </div>
</div>

这里是这个 div 的 CSS：

.navigation-fixed 
    position: fixed;
    top: 52px;
    z-index: 11; //when removed text becomes sharper

【问题讨论】：

由于您使用的是位置，请确保没有任何其他元素超过它

文本上没有其他元素。只是当我禁用 z-index 或将其设置为 0 或更小时，然后 0 模糊消失。

z-index 本身对任何浏览器上的文本都没有影响，所以肯定会在更改 z-index 后发生不同的事情，而不是 z-index 本身，可能是 js或者屏幕上的另一个元素或元素位置，顺便说一下，如果你的元素上没有任何显示，为什么你仍然使用 z-index？

我的带有文本的元素是一个浮动标题，类似于 *** 上的那个。文本位于标题的左角。在屏幕中心，当我们向下滚动页面时，我们会看到标题下方的帖子流。页眉左下角的文字有些模糊。当我制作标题 0 的 z-index 时，文本会变得清晰，但随后帖子会越过标题。

我还刚刚注意到，当我更改 z-index 时，元素不仅会更改其 z 位置（深度），还会更改其位置（x，y 位置）。你知道这是怎么发生的吗？

【参考方案1】：

这与相对定位元素后面的固定位置元素有关。

我的意思是，当您设置了 z-index 属性时，您可能有另一个元素在上面并“隐藏”了您的元素，当您删除它时，文本变得更清晰，因为现在该元素在另一个元素之上。

【讨论】：

不，在我的情况下这是不可能的。在我的例子中，文本是我更改 z-index 的元素的子元素。无论如何，我删除/减少 z-index（将元素放置得更深而不是更高）。

我可以发布的唯一代码已经在问题中。到目前为止，这是一个非常奇怪的情况，我发现了这篇文章 http://keithclark.co.uk/articles/gpu-text-rendering-in-webkit，它可以解释这种情况，但它没有说明 z-indexes。