google-chrome - 使用 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 变换的信息。

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

score 99 · Accepted Answer

我多次遇到这个问题，似乎有两种解决方法（如下所示）。您可以使用这些属性中的任何一个来修复渲染，或同时使用这两个属性。

隐藏的背面可见性解决了这个问题，因为它将动画简化为对象的正面，而默认状态是正面和背面。

backface-visibility: hidden;

TranslateZ 也可以使用，因为它是一种为动画添加硬件加速的技巧。

transform: translateZ(0);

这两个属性都解决了您遇到的问题，但有些人也喜欢添加

-webkit-font-smoothing: subpixel-antialiased;

对他们的动画对象。我发现它可以改变网络字体的呈现，但也可以随意尝试这种方法。

score 36 · Accepted Answer

After trying everything else here with no luck, what finally fixed this issue for me was removing the will-change: transform; property. For some reason it caused horribly blurry looking scaling in Chrome, but not Firefox.

score 31 · Accepted Answer

为了改善模糊，特别是。在 Chrome 上，尝试这样做：

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

更新： 透视增加了用户和 z 平面之间的距离，这在技术上缩放了对象，使模糊看起来“永久”。以上perspective(1px)就像鸭带，因为我们正在匹配我们试图解决的模糊性。使用下面的 css 可能会更好：

transform: translateZ(0);
backface-visibility: hidden;

score 20 · Accepted Answer

我发现调整比例有一点帮助。

使用scale(1.048)over(1.05)似乎可以更好地近似全像素字体大小，从而减少子像素模糊。

我还使用translateZ(0)了这似乎调整了 Chrome 在变换动画中的最后舍入步骤。这对我的悬停使用来说是一个加分项，因为它提高了速度并减少了视觉噪音。然而，对于 onclick 函数，我不会使用它，因为转换后的字体看起来不那么脆。

score 18 · Accepted Answer

18

代替

transform: scale(1.5);

使用

zoom : 150%;

修复了 Chrome 中的文本模糊问题。

于 2015-02-28T19:56:59.263 回答

score 9 · Accepted Answer

这一定是 Chrome 的错误（版本 56.0.2924.87），但下面修复了我在控制台（'.0'）中更改 css 属性时的模糊性。我会报告的。

filter: blur(.0px)

score 7 · Accepted Answer

桑德尔斯带领我找到答案。除了filter: scale不存在，但filter: blur确实存在。

将下一个声明应用于看起来模糊的元素（在我的情况下，它们位于转换后的元素内）：

backface-visibility: hidden;    
-webkit-filter: blur(0);

它几乎完美地工作。“几乎”是因为我正在使用过渡，而在过渡时，元素看起来并不完美，但一旦过渡完成，它们就会完美。

score 6 · Accepted Answer

我发现，问题以任何方式发生在相对变换上。translateX(50%)、scale(1.1) 或其他。提供绝对值总是有效的（不会产生模糊的文本（ures））。

这里提到的解决方案都不起作用，我认为还没有解决方案（在我写这篇文章时使用 Chrome 62.0.3202.94）。

在我的情况下transform: translateY(-50%) translateX(-50%)会导致模糊（我想使对话框居中）。

为了达到更多“绝对”值，我必须将十进制值设置为transform: translateY(-50.09%) translateX(-50.09%).

笔记

我很确定，这个值在不同的屏幕尺寸上会有所不同。我只是想分享我的经验，以防它对某人有所帮助。

score 5 · Accepted Answer

我有着同样的问题。我使用以下方法解决了这个问题：

.element {
  display: table
}

score 4 · Accepted Answer

在我的情况下，以下代码导致字体模糊：

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

并且只是添加缩放属性为我修复了它。玩缩放，以下对我有用：

zoom: 97%;

score 4 · Accepted Answer

我找到了一个更好更干净的解决方案：

.element{
 transform:scale(0.5) 
 transform-origin: 100% 0;
}

或者

.element{
 transform:scale(0.5) 
 transform-origin: 0% 0;
}

感谢这篇文章：使用变换防止模糊渲染：比例

score 3 · Accepted Answer

3

zoom: 101%;当您无法使用缩放 + 比例组合时，请尝试用于复杂设计。

于 2016-09-30T07:17:25.440 回答

score 3 · Accepted Answer

2019 年更新
Chrome 显示错误仍未修复，尽管不是顾客的错，但本网站提供的全部建议都无法解决该问题。我可以同意，我徒劳地尝试了其中的每一个：只有 1 个接近，这就是 css 规则：filter:blur(0); 这消除了容器 1px 的移动，但不能解决容器本身及其可能具有的任何内容的模糊显示错误。

现实是这样的：这个问题实际上没有解决办法，所以这里有一个针对流动网站的解决方法

案例
我目前正在开发一个流畅的网站，并有 3 个 div，所有这些 div 都以悬停效果为中心，并在宽度和位置上共享百分比值。Chrome 错误发生在设置为 left:50% 的中心容器上；和变换：translateX(-50%); 一个共同的设定。

示例：首先是 HTML...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

这是发生 Chrome 错误的 CSS ......

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

这是固定的CSS...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

错误的小提琴： https : //jsfiddle.net/m9bgrunx/2/
固定的小提琴： https ://jsfiddle.net/uoc6e2dm/2/

正如您所看到的，对 CSS 的少量调整应该会减少或消除使用变换进行定位的要求。这也适用于固定宽度的网站以及流动的网站。

score 3 · Accepted Answer

我刚刚在 Chrome 上发现的模糊变换（translate3d，scaleX）的另一个尝试是将元素设置为“显示：内联表；”。在某些情况下（在 X 轴上），它似乎强制像素舍入。

我读到 Chrome 下的亚像素定位是有意的，开发人员不会修复它。

score 2 · Accepted Answer

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

 transform-origin: 50% 50%;

这个

 transform-origin: 51% 51%;

它对我有帮助

score 2 · Accepted Answer

当我使用transform: translate(-50%,-50%).

好吧，我真的尝试了很多解决方法，例如：

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

这些都没有对我有用。

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

注意：这可能取决于用例。但肯定值得一试！

score 2 · Accepted Answer

以上都不适合我。

当我添加透视图时它起作用了

即从

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

我改成

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

score 2 · Accepted Answer

2

我的解决方案是：

显示：初始；

然后脆脆的

于 2020-03-10T16:36:02.343 回答

score 2 · Accepted Answer

2

这对我有用：

body { perspective: 1px; }

于 2021-06-30T21:16:21.140 回答

score 2 · Accepted Answer

以上都不适合我。我有这个弹出窗口动画：

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

在我的情况下，应用此规则后模糊效果消失了： -webkit-perspective: 1000;即使它在 Chrome 检查器中被标记为未使用。

score 2 · Accepted Answer

我使用了所有答案的组合，这最终对我有用：

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

score 1 · Accepted Answer

我有一个 div，它有一个小的透视偏移，以提供微妙的 3D 效果。div 中的文字模糊不清，我在这里尝试了所有建议，但均无济于事。

奇怪的是，我发现设置“过滤器：继承；” 在文本元素上大大提高了清晰度。虽然我不明白为什么。

这是我的代码以防万一：

html:

<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>

CSS：

    #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;
        }

score 1 · Accepted Answer

我从我的代码中删除了这个 - transform-style: preserve-3d; 并添加了这个-transform: perspective(1px) translateZ(0);

模糊消失了！

score 1 · Accepted Answer

1

我通过添加以下内容来解决我的问题：

transform: perspective(-1px)

于 2018-06-05T06:46:42.223 回答

score 1 · Accepted Answer

重要的是要补充一点，如果正在翻译的元素的高度为奇数像素，则会出现此问题。因此，如果您可以控制元素的高度，将其设置为偶数将使内容看起来清晰

score 1 · Accepted Answer

对于合唱：

我在这里尝试了所有建议。但没有奏效。我的大学找到了一个很好的解决方案，效果更好：

你不应该超过 1.0

并包括translateZ(0)在悬停但不在非悬停/初始位置。

例子：

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}

score 0 · Accepted Answer

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

我的 React App 的 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 居中定位它的孩子。

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

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

不得不返工组件有点遗憾，但经过测试它工作得很好。

概括：

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

在 Chrome 74.0.3729.169（截至 2019 年 5 月 25 日）中，似乎没有任何修复因转换导致的某些浏览器缩放级别发生的模糊。即使是简单TransformY(50px)的元素也会模糊。这不会出现在当前版本的 Firefox、Edge 或 Safari 中，而且似乎也不会出现在所有缩放级别。

score 0 · Accepted Answer

仅使用 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);
    }
})}

score 0 · Accepted Answer

对我来说，问题是我的元素正在使用transformStyle: preserve-3d. 我意识到该应用程序实际上并不需要它，并且将其删除可以解决模糊问题。

score 0 · Accepted Answer

只是为了增加修复热潮，将 {border:1px solid #???} 放在看起来很糟糕的对象周围为我解决了这个问题。如果您有稳定的背景颜色，请考虑这一点。这太愚蠢了，没有人想过要提我猜，嗯嗯。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

perspective: 2500px;

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

score -2 · Accepted Answer

你可以使用 cssfilter来解决这个问题。

.element {
    filter: blur(0);
}

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

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

35 回答 35

Related

Reference