当使用带有％的transform transformY时，Chrome现在正在模糊文本 [英] Chrome is now blurring text when using transform translateY with percent

问题描述

几天以来，当我使用非常酷的技术通过css3转换(转换:translateY(-50％);)对div垂直居中进行实验时，我正在尝试一个很大的问题:

Since a few days, I'm experimenting a pretty big issue when using the very cool technique for vertically centering a div with css3 transform (transform: translateY(-50%); ) described here:

https://davidwalsh.name/css-vertical-center

实际上，该div中包含的元素(文本或图像)变得模糊.

Indeed, the elements (text or images) included in this div get blurry.

我尝试了很多技术(转换:translateZ(0)；背面可见性； scale(1)； translateX(calc(-50％+ 0.5px))；过滤器:blur(0)；依此类推) .但实际上没有任何作用.

I tried a lot of techniques (transform: translateZ(0); backface-visibility; scale(1); translateX( calc( -50% + 0.5px ) ); filter: blur(0); and so on). But nothing actually works.

唯一可行的方法是使用另一种技术使div垂直居中，例如display:table-cell.

The only one that works is to use another technique for vertically centering the div, like display:table-cell.

但是，出于明显的原因(例如有义务添加div容器)，我宁愿不这样做.

But, for obvious reasons (like the obligation to add a div container), I'd rather not to do so.

所以我有两个问题:

首先，您知道一种有效的技术吗? 第二，最新(或最新)的Chrome版本是否有新问题?

first, do you know a technique that works ? second, is it a new issue with the last (or latest) version(s) of Chrome ?

感谢您的帮助，

大卫

PS: 这里表达的所有旧解决方案 通过translate3d基于Webkit的模糊/扭曲文本后动画 没工作

PS : all the old solutions expressed here Webkit-based blurry/distorted text post-animation via translate3d don't work

推荐答案

就目前而言，我只找到一种好的解决方案:

For now, I found only one good solution:

transform: translate(-50%, -50.1%)

• 0.1％-通常用户看不到
• 无需计算值

希望Chrome可以解决它-该错误自2014年以来就存在))))

Hope chrome will fix it - the bug exists since 2014))))

这篇关于当使用带有％的transform transformY时，Chrome现在正在模糊文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！