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

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

正如上面提到的@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 3

我遇到了Ken Avila的帖子中描述的完全相同的问题:CSS:transform:translate(-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%)没有创建任何"bluryness",可能是因为我的元素有一个设置的高度,因此不会在非整数边界上渲染.

因此,我的解决方案最终如下:

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

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

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

Answer 5

您要翻译的元素必须可以被两个偶数整除.

重要的是,无论你试图向上移动一半的元素,它的宽度和高度都可被2整除.非常类似于响应式图像,当事物可以移动50%而不分割像素.

宽度为:503px,高度为500px的div将导致模糊,无论您移动它的方式或使用translateX或Y时使用多少.使用转换,它使用GPU图形加速器,这将导致非常清晰,平滑边缘.设置box-sizing可能也是个好主意:border-box; 确保计算的宽度包括填充和边框.

使用百分比宽度时要小心.如果它与屏幕尺寸相关,则其他屏幕像素宽度将导致此模糊.

Answer 6

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