본문 바로가기
웹관련/크로스브라우징

[CSS] 인터넷익스플로러[IE]의 css transition 떨림문제 해결방안

by 착한덕환 2019. 2. 8.



최근들어 배경화면이 서서히 커지는 효과를 많이 사용합니다.

근데 크롬과 파이어폭스등은 transition 효과를 사용하여 scale로 점점 커지게 하면

부드럽게 아주 잘 작동을 합니다.


그러나!!! 항상 문제는 IE 가 문제네요...

scale 효과로 점점 커지게 할때, 이미지가 떨리는 현상이 발생이 됩니다.


한참을 인터넷을 검색하다가, 외국사이트에서 IE 오류라고 하네요... 망할... IE 언제쯤 사라질래.....

다행히 해결방안을 제시합니다.


방법은 transform:perspective(500px) rotate(.001deg); 추가 하라는것이네요.


CSS부분을 그래서 아래와 같이 처리를했더니 떨림을 잡아줍니다.. 다행....

.mainFullPage .section .setionbg {width:100%; height:100%; top:0; left:0; transition:all 22s ease; transform:perspective(500px) scale(1) rotate(.001deg);}
.mainFullPage .section.drani .setionbg {transform:perspective(500px) scale(1.2) rotate(.001deg); -webkit-transform: perspective(500px) scale(1.2) rotate(.001deg);}


IE 항상 날 힘들게 하네요..

모르면 이것 또한 몇시간씩 잡아먹으니.. 알면 간단하지만요....


혹시 몰라서 또다시 기록을 해둡니다..

댓글