通过 translate3d 基于 Webkit 的模糊/扭曲文本后期动画

Question

此问题似乎会影响所有基于 WebKit 的浏览器，包括 iPhone。

首先是一些背景知识。我正在开发的网站使用基于 JavaScript 的“滑块”动画。

我正在使用 -webkit-transform:translate3d 来“增强”实际动画。与基于 JavaScript 的方法相反，使用此方法时，一旦内容被动画化，文本就会变得完全模糊。这在 iPhone 上尤其明显。

我看到的一些解决方法是删除相对定位（我这样做了），并添加了 -webkit-font-smoothing: antialiased 规则（我也这样做了）。这两项改变都没有产生丝毫影响。

我能够在没有模糊文本的情况下正常工作的唯一方法是使用常规 JavaScript 进行动画并完全绕过 translate3d。我更喜欢使用 translate3d 因为它在支持 WebKit 的设备上执行速度快得多，但我一生都无法弄清楚为什么它会影响这样的文本一个糟糕的方法。

任何建议或解决方案将不胜感激。

Answer 1

这些似乎都不适合我，但我找到了一个稍微肮脏的解决方案，它似乎可以解决问题：

top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);

Answer 2

我在 Ken Avila 的帖子中描述了完全相同的问题：CSS：转换：翻译（-50％，-50％）使文本模糊

问题当然是我使用了transform：translate（-50％，-50％）这使得我的居中内容变得模糊，但仅在 osx 上的 safari 中。

不仅文本变得模糊，整个内容（包括图像）也变得模糊。
我继续阅读： http://keithclark.co.uk/articles/ gpu-text-rendering-in-webkit/
“模糊”是由于元素在非整数边界上渲染造成的。

我还发现，我可以避免在这篇文章的居中水平部分上使用变换平移： https://coderwall.com/p/quutdq/how-to-really-center-an-html-element-via-css-position-absolute-fixed - 唯一的缺点是我必须引入一个包装器。

我发现使用transform:translateY(-50%)不会产生任何“模糊”，可能是因为我的元素有一个设定的高度，因此不会最终在非整数边界上渲染。

因此我的解决方案最终是这样的：

.wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
}
.centered {
  position: relative;
  left: -50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class="wrapper">
  <div class="centered">
    Content
  </div>
</div>

Answer 3

正如@Robert 上面提到的，有时添加背景会有所帮助，但并非总是如此。

因此，对于 Dmitry 添加的示例，这不是您必须做的唯一事情：除了后台之外，您必须告诉浏览器显式使用正确的抗锯齿功能，因此，有一个固定的 Dmitry 示例： http://jsfiddle.net/PtDVF/1/

您需要在需要修复抗锯齿的块周围（或为其）添加这些样式:

background: #FFF; /* Or the actual color of your background/applied image */
-webkit-font-smoothing: subpixel-antialiased;

Answer 4

您要翻译的元素必须能被偶数整除。

重要的是，无论您尝试移动一半的元素，其宽度和高度都可以被二整除。与响应式图像非常相似，物体可以移动 50% 而无需分割像素。

宽度为 503px、高度为 500px 的 div 会导致模糊，无论您以何种方式移动它，或者使用 TranslateX 或 Y 时移动多少。使用 Transform，它利用 GPU 图形加速器，结果应该非常清晰、平滑边缘。设置 box-sizing: border-box; 也可能是个好主意。确保计算的宽度包括填充和边框。

使用百分比宽度时要小心。如果它与屏幕尺寸相关，则任何其他屏幕像素宽度都会导致这种模糊。

Answer 5

我通过在任何动画发生之前向元素添加 translate3d 样式来解决此问题。

-webkit-transform: translate3d(0,0,0); 

Answer 6

这是最好的解决方案
translateX(calc(-50% + 0.5px))

Answer 7

可能是最简单的解决方案：

transform: translate(-50%, -50%) scale(2); 
zoom:.5;

缩放负责将像素值四舍五入为整数

Answer 8

使用CSS“round”函数解决老问题的新解决方案。

为了确保翻译后的块在整数坐标上渲染（假定父级已经在整数坐标上），我们可以使用“圆”功能。

居中示例：

left: 50%;
top: 50%
translate: translateX(round(-50%, 1px), round(-50%, 1px));

ref: https://developer.mozilla.org/en -US/docs/Web/CSS/round

Answer 9

这些答案都不适合我，但使用却

display: inline-table;

成功了

Answer 10

Neil Taylor 的解决方案是最好的，但它仍然可以改进：

transform:translateX(-50%)translateX(.5px)

这样它有 2 个优点：

• 它可以在像 IE11 这样的蹩脚浏览器中工作（不支持翻译内的计算）
• 它仅在解析时计算，而不是每次浏览器计算时计算。

Answer 11

我希望这是将对象居中到屏幕的正中心。
变换时会发生模糊：translate(-50%,-50%);

因此，

position: absolute;
margin:0;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

我尝试使用 javascript 将样式注入到元素中。 (React.js)

const node = ReactDOM.findDOMNode(this);
var width = node.offsetWidth;
var height = node.offsetHeight;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

style={
    left : (windowWidth/2) - (this.state.width/2) + 'px',
    right:  (windowWidth/2) - (this.state.width/2) + 'px',
    top: (windowHeight/2) - (this.state.height/2) + 'px',
    bottom: (windowHeight/2) - (this.state.height/2) + 'px'
}

通过 javascript 样式将样式注入到元素中，

例如。

export default class Dialog extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: '0px',
            height: '0px'
        };
    }

    setWidthhandHeight(node){
        if (this.state.width !== node.offsetWidth) {
            this.setState({
                width: node.offsetWidth,
                height: node.offsetHeight
            });
        }
    }

    componentDidMount() {
        this.setWidthhandHeight(node);
    }

    render() {
        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;
        return (
            <dialog className={this.props.className + " dialog"}
                    style={{
                        left : (windowWidth/2) - (this.state.width/2) + 'px',
                        right:  (windowWidth/2) - (this.state.width/2) + 'px',
                        top: (windowHeight/2) - (this.state.height/2) + 'px',
                        bottom: (windowHeight/2) - (this.state.height/2) + 'px'
                    }}>
                {this.props.title ? (
                    <header><span>{this.props.title}</span></header>
                    )
                    : null
                }
                {this.props.children}
            </dialog>
        );
    }
}

Answer 12

将容器中应用变换平移属性的任何元素的垂直边距（顶部边距或底部边距）或高度减少 1 个像素。

Answer 13

将 Chrome 的缩放重置为 100% 对我来说很有效。

Answer 14

如果百分比用于动画，如果我们还考虑它的性能，那么它仍然可以接受，但是当您不使用 translate 进行动画时，它会有所不同，因为文本总是模糊的。

使用百分比时，可能会出现小数，例如 0.5px 和文本模糊的原因。在我的实验中，使用 translate(0.5px, 0.5px) 会使文本非常模糊，因此您应该避免使用 0.3px <=> 之间的小数。 0.7px 而 0.2px 和 0.8px 仍然可以接受。

我的建议是使用 JavaScript 并将百分比转换为圆角像素以对元素进行动画处理，如果使用 translate 来定位元素，则使用像素而不是百分比。

另一种选择是使用left和top设置带有百分比的初始位置，然后使用transform：使用目标位置的像素翻译（），并仅使用transition-property：transform;对变换进行动画处理

Answer 15

对于替代解决方案，请尝试：

-webkit-text-stroke: 0.35px

Answer 16

使用 zoom 为我解决了这个问题。

我刚刚添加了 zoom: 1.04;

Answer 17

在我的案例中找到的解决方案是设置第一个子元素的高度值

Answer 18

@kizu
这些答案和建议没有帮助。对于您的 jsfiddle，您需要添加

-webkit-perspective-origin: 50% 50%;
-webkit 透视：1400px；

到要使用translate3d 的元素的父元素，否则平移z 轴实际上不会执行任何操作。在这种情况下，您将其应用到您单击的按钮，我认为您的意思是将其应用到内容。

但无论如何，添加这些来激活 z 轴更改会导致示例中的按钮模糊。

我也很想找到解决这个问题的办法，恐怕没有。

Answer 19

我在这些类型的问题上使用 will-change ，它通常可以解决缩放问题或舍入错误，例如看到分隔元素的 1px 白线。

will-change：transform;

在此处阅读更多内容：
https://developer.mozilla.org/en-US/文档/Web/CSS/will-change

Answer 20

使用 HTML5 文档类型为我解决了这个问题。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">