CSS & GSAP 스케일링 그래픽 문제

Question

Firefox 28에서는 텍스트가 애니메이션 끝에 매우 약간의 지터를 발생시킵니다. Chrome 34에서는 텍스트가 흐리게 보입니다. 비트 맵으로 변환되어 확장 된 것처럼 보입니다. 애니메이션이 끝나면 흐리게 보입니다. 나는 그것이 완벽하게 작동 IE11에 충격을 받았습니다. 그것은 내가 잘못 뭔가 경우 또는

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

확실하지가 브라우저 버그/문제가 있다면. 가능한 경우 부드럽고 날카 롭고 딸꾹질 회전/비율 조정을 시도합니다.

Answer 1

을 애니메이션하려는 요소의 상위 div에 추가해보십시오. 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

이제 크롬에서 더 흐릿하게 텍스트를 볼 수 없어야한다3210

희망이 도움이됩니다! :)

Answer 2

다음을 추가해보십시오. -webkit-font-smoothing : antialiased; P 텍스트에. scrollmagic을 사용할 때 애니메이션에 문제가 있고 Chrome에서 흐릿 해 보이는 문제가 있습니다. 왜 그런가? 사이트는 testing scrollmagic

Answer 3

입니다. 이것은 greensock 문제가 아니지만 브라우저 버그 관련 웹킷입니다.

이 시도 :

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