CSS和GSAP缩放图形问题

Question

在Firefox 28上，文本在动画结束时会产生非常轻微的抖动。在Chrome 34中，文字变得模糊。看起来它已转换为位图并放大。它在动画结束时保持模糊。我很震惊，在IE11上它可以很好地工作。

http://codepen.io/anon/pen/fsljh

不知道这件事情我做错了，或者如果它是一个错误/问题与浏览器。如果可能的话，尝试获得平滑，锐利，无呃逆旋转/缩放。

Answer 1

尝试将perspective添加到要尝试动画的元素的父div。

您应该在Chrome中看到不模糊的文字现在：http://codepen.io/jonathan/pen/qmHwe

JS：

var wrapper = document.getElementById("wrapper"); 
var sampleText = document.getElementById("sampleText"); 
// add perspective to its parent 
// perspective applies to the children its added to 
TweenMax.set(wrapper,{perspective:1000}); 
var bubAnim = TweenMax.to(sampleText, 3, {scale: 2.5, rotation:30}); 

bubAnim.play(); 

HTML：

<div id="wrapper"> 
    <p id="sampleText">About Me</p> 
</div> 

资源：https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

希望这有助于！ :)

Answer 2

尝试添加：-webkit-font-smoothing：antialiased;在p文本上。使用scrollmagic时，我也遇到了一些问题，例如动画效果和Chrome上的模糊效果。任何想法为什么？网站是testing scrollmagic

Answer 3

这不是一个绿色环保问题，而是一个浏览器错误的webkit。

试试这个：

TweenMax.set(element, {force3D:false});