使用 CSS 转换后的模糊文本: scale () ; 在 Chrome 中

我也有同样的问题，我用:

.element {
display: table
}

我的解决办法是:

显示: 初始化;

然后又脆又锋利

当我使用 transform: translate(-50%,-50%)的时候，我面对的是 Chrome 上的模糊文本问题，而不是 Firefox 上的。

我真的试过很多变通方法，比如:

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

这些对我都没用。

最后，我使元素的高度和宽度均匀。它为我解决了问题! ! ！

注意: 它可能取决于不同的用例，但是值得一试！

单靠 css 是很难解决的。

所以我用 jquery 解决了这个问题。

这是我的 CSS。

.trY {
top: 50%;
transform: translateY(-50%);
}


.trX {
left: 50%;
transform: translateX(-50%);
}


.trXY {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

这是我的 jquery。

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
if ($(this).outerWidth() % 2 != 0) {
var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
$(this).css("width", fixed_width);
}
if ($(this).outerHeight() % 2 != 0) {
var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
$(this).css("height", fixed_height);
}
})}

从这些答案中我已经尝试了很多例子，不幸的是没有任何帮助 铬 Version 81.0.4044.138 我已经增加了转换元素

 transform-origin: 50% 50%;

这个

 transform-origin: 51% 51%;

对我有帮助

只是添加到修复狂热，把{ orders: 1px 实心 # ? ? ? }解决了我的问题。 如果你有一个稳定的背景颜色，考虑这一点。 这真是太蠢了，没有人想到要提起我猜，嗯嗯。

在我的示例中，错误在于将动画设置为动画元素(一个 SVG)的父 div。父 div 有一些疯狂的宽度，比如466.667像素。把它设成奇数也没用。但是: 使用动画定位 SVG 本身(而不是父容器)。

对于未来的读者来说: 对我来说，问题在于我加了一句:

perspective: 2500px;

移除此属性解决了问题。

所以，我尝试了以上所有的解决方案，但是都没有效果！

我在 React App 的 index.html 中有一个模态根 div。我正在呈现一个 Modal 组件(。如果有必要的话。首先，我定位模式本身固定，使其左上50% ，并应用一个过渡(-50% ，-50%)得到它的中心。

如果 Chrome 浏览器的缩放比率不是100% ，我就会放大和缩小，并注意到模态内容的模糊性。可能是110% 或者90-80-75% 等等，没关系。除了100% 的变焦，它真的很模糊和丑陋。

因此，我决定摆脱整个基于过渡的解决方案，我以前的中心的孩子。模态元件模态元件。

我定位我的模态根固定，使它顶部左右底部0，所以它总是100vh 和 wv。然后，我将其设置为一个 Flex 容器，并通过居中对齐项和调整内容来定位它的子容器。

但是！总是有但是的。Mode-root 在默认情况下有一个 z-index: -1。我决定如果模式被打开，就用编程方式将其更改为59。我还应用了一个覆盖，使页面的其余部分变暗，即。覆盖，其 z 指数为60。实际的模态内容(。模式)的 z 指数为61。

我还想动画的入口时，该元素出现，所以我玩的边缘，而不是应用任何类型的过渡到它。这是一个立方贝塞尔动画，处理边缘-顶部的适合百分比在动画，但在结束时，它是边缘-顶部0没有过渡属性。

有点遗憾，不得不重新工作的组件，但在测试之后，它的工作相当不错。

摘要:

• 最高母容器固定，覆盖整个页面
• 根据希望与模态交互的需要设置最高的父容器的 z-index -1或[ custom- value ](模态是打开的)
• 如果模态关闭，则将容器的 z-index 设置为 -1
• 使容器成为一个伸缩容器，并将其子容器放在中心
• 通过边距值而不是转换来动画子元素

我希望它能对你们有些人有所帮助:)

这就是对我有效的方法:

body { perspective: 1px; }

我有一个 div，它有一个小的透视变化，以提供一个微妙的3D 效果。Div 中的文本模糊不清，我尝试了这里的所有建议，但都没有用。

奇怪的是，我发现在文本元素上设置“ filter: Heritage;”极大地提高了清晰度，尽管我不明白为什么。

以下是我的代码，以防万一:

网址:

<div id="NavContainer">
<div id="Nav">
<label>Title</label>
<nav>
<a href="/">home</a>
<a href="/link1">link1</a>
<a href="/link2">link2</a>
</nav>
</div>
</div>

传真:

    #NavContainer {
position: absolute;
z-index: 1;
top: 0;
left: 20px;
right: 20px;
perspective: 80vw;
perspective-origin: top center;
}


#Nav {
text-align: right;
transform: rotateX(-5deg);
}


#Nav > nav > a,
#Nav > label {
display: inline-block;
filter: inherit;
}


#Nav > label {
float: left;
font-weight: bold;
}

尝试播放动画块上的缩放值。 在我的例子中，缩放: 99.6% ; 完全修复了模糊的文本。但是，例如，99.7% 的值文本仍然是模糊的，因此在每种情况下，这个值可能会有所不同。

对我起作用的是移除 backdrop-filter: blur(8px);。虽然这个过滤器只应用于 <div>的背景，而不是它的文本，似乎仅仅是这个属性的存在使 Chrome 在与 transform: scale();一起使用时略微模糊了文本。