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



css text (12)

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

首先是一些背景。 我正在使用的网站使用基于JavaScript的“滑块”动画,该动画基本上与此相同: http://www.assistly.com/product-tour/#/easy-setuphttp://www.assistly.com/product-tour/#/easy-setup

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

我看到的一些解决方法是删除相对定位,我做了,并为-webkit-font-smoothing: antialiased添加规则-webkit-font-smoothing: antialiased ,我也做了。 这两种变化都没有丝毫差异。

我可以在没有模糊文本的情况下正常工作的唯一方法是为动画使用常规JavaScript并完全绕过translate3d 。 我更喜欢使用translate3d因为它在支持WebKit的设备上运行更快,但对于我的生活,我无法弄清楚为什么它会以如此糟糕的方式影响文本。

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

https://src-bin.com


Answer #1

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

-webkit-perspective-origin:50%50%; -webkit-perspective:1400px;

到你想要使用translate3d的元素的父元素,否则翻译z轴实际上没有做任何事情。 在这种情况下,您将它应用于您单击的按钮,我认为您打算将其应用于内容。

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

我也很想找到解决方案,我担心没有。


Answer #2

您正在翻译的元素必须可以被两个偶数整除。

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

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

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


Answer #3

使用HTML5 doctype解决了我的问题。

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

Answer #4

刚刚通过一个简单的技巧解决了这个问题,我不知道原因。 在这里你可以看到不同的。

最初,我设计了这样的元素:

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

这导致文本模糊...经过随机试验,我把风格放在类样式中并强制CSS处理器采用这种样式而不是元素样式(因为我使用React组件,React设置的样式将变为元素风格)

这就是我所做的。

.class-name {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

我真的想知道为什么将这种风格从元素风格转移到类风格会解决这个问题。 任何想法?


Answer #5

对于替代解决方案,尝试:

-webkit-text-stroke: 0.35px


Answer #7

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

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

Answer #8

我遇到了Ken Avila的帖子中描述的完全相同的问题: CSS:transform:translate(-50%, - 50%)使文本模糊

问题当然是我使用了transform:translate(-50%, - 50%)这使得我的居中内容变得模糊,但仅限于osx上的safari。

不仅文本变得模糊,而且整个内容,包括图像。 我读到: http://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/ ://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/,“模糊”是由于元素在非整数边界上呈现。

我还发现我可以避免在这篇文章的中心部分的横向部分使用transform translate: https://coderwall.com/p/quutdq/how-to-really-center-an-html-element-via-css-position-absolute-fixedhttps://coderwall.com/p/quutdq/how-to-really-center-an-html-element-via-css-position-absolute-fixed 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 #9

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

因此,对于示例,Dmitry补充说,这不是您必须做的唯一事情:除了从背景中,您必须告诉浏览器明确使用正确的抗锯齿,因此,有一个固定的Dmitry的例子: http://jsfiddle.net/PtDVF/1/http://jsfiddle.net/PtDVF/1/

您需要在需要修复消除锯齿的块周围添加这些样式(或者用于):

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


Answer #11

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

display: inline-table;

做了伎俩


Answer #12

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





blurry