safari transition bug

lize·2022년 4월 12일
0

로딩페이지 중앙에 로고가 있고, 로딩이 끝나면 로고가 헤더로 올라가는 애니메이션을 만들었다.

크롬에서는 정상작동하는데 사파리에서는 로고가 위로 올라가는데 중앙을 못맞추고 올라가다가 삐그덕 하고 중앙에 정렬되는 문제가 생겼다.

도움받은 링크:
https://milooy.wordpress.com/2015/09/09/css-transition-flickering-error-in-safari/

#top-logo { 
transition: .8s; }

로고 선택자에 아래처럼 애니메이션을 적용할 속성만 특정지어서 적어서 문제 해결했다.

#top-logo { 
transition: transform .8s, opacity .8s, top .8s; }
profile
웹퍼블리셔

0개의 댓글