使用 CSS 变换后模糊文本：scale();在铬

Question

Google Chrome 最近似乎有一个更新，在执行transform: scale() 后导致文本模糊。具体来说，我正在这样做：

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

如果您在 Chrome 中访问 http://rourkery.com，您应该会在主文本区域看到问题。它以前没有这样做，它似乎不会影响其他 webkit 浏览器（如 Safari）。还有一些其他帖子是关于人们在 3d 变换方面遇到类似问题的，但找不到任何关于这样的 2d 变换的信息。

任何想法都将不胜感激，谢谢！

Answer 1

在我的例子中，错误在于动画被设置为动画元素（SVG）的父 div。父 div 有一些疯狂的宽度，比如 466.667px。将其设置为奇数将无济于事。但是：用动画定位 SVG 本身（而不是父容器）。

Answer 2

对于将来阅读的任何人： 就我而言，问题是我添加了：

perspective: 2500px;

到父元素。删除此属性可解决此问题。

Answer 3

所以。我尝试了上述所有解决方案，但没有任何效果。但是！

我的 React 应用程序的 index.html 中有一个 modal-root div。如果有必要，我会在其中渲染一个模态组件（.modal）。首先，我将模态本身固定，使其位于左上角 50% 并应用过渡（-50%，-50%）使其居中。

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

所以我决定摆脱之前的整个基于过渡的解决方案，以使 .modal 元素的子元素居中。

我将我的模态根定位固定，使其左上角右下角为 0，因此它始终为 100vh 和 wv。然后我把它做成一个 flex-container 并通过 align-items 和 justify-content centered 来定位它的孩子。

但是！总有一个但是。 modal-root 默认有一个 z-index: -1。如果打开模式，我决定以编程方式将其更改为 59。我还应用了一个叠加层，使页面的其余部分更暗，即 .overlay，它的 z-index 为 60。实际的模态内容 (.modal) 的 z-index 为 61。

我还想在该元素出现时为其入口设置动画，因此我在玩边距，而不是对其应用任何类型的过渡。这是一个立方体动画，它在动画中以合适的百分比处理该边距顶部，但最后它是边距顶部 0，没有过渡属性。

不得不重做组件有点可惜，但经过测试它工作得很好。

总结：

• 固定最高父容器，覆盖整个页面
• 设置最高父容器的 z-index -1 或 [自定义值]，具体取决于想要与模态交互（模态已打开）
• 如果模式关闭，则将容器的 z-index 设置为 -1
• 使容器成为 flex-container 并将其子容器放置在中心
• 通过边距值而不是过渡来为子级设置动画

我希望它可以对你们中的一些人有所帮助:)

Answer 4

尝试在动画块上使用缩放值。 就我而言，缩放：99.6%；完全修复了模糊的文字。但例如，对于 99.7% 的值，文本仍然是模糊的，因此在每种情况下，该值都可能会有所不同。

Answer 5

您可以使用 css filter 来解决此问题。

.element {
    filter: blur(0);
}

关于vendor-prefix，请自行解决。-webkit-filter,-ms-filter。 细节在这里 http://browser.colla.me/show/css_transformation_scale_cause_blurring