크롬에서 opacity transition 사용할 때 레이어가 사라지는 문제

지금 진행하고 있는 프로젝트에서, 화면 하단에 고정된 레이어를 만들고, 경우에 따라 화면 아래로 사라졌다 나타나는 효과를 적용하였습니다.

1
2
3
.fixed_button_wrap{position:fixed;left:0;bottom:0;width:100%;height:45px;opacity:1;
    transition:bottom 0.3s, opacity 0.3s;}
.fixed_button_wrap.hide{pointer-events:none;bottom:-50px;opacity:0;}

테스트한 단말과 브라우저들에서는 모두 정상적으로 표시되었으나, 일부 안드로이드(크롬)에서 한 번 사라진 레이어가 다시 나타나지 않는 문제가 발견되었습니다. 디버깅 해보면 좌표와 투명도는 모두 정상으로 나타나지만, 화면에는 보이지 않더군요.
해결책은 -webkit-backface-visibility:hidden;를 추가해 주어야 합니다.

1
2
3
.fixed_button_wrap{position:fixed;left:0;bottom:0;width:100%;height:45px;opacity:1;
    transition:bottom 0.3s, opacity 0.3s;-webkit-backface-visibility:hidden;}
.fixed_button_wrap.hide{pointer-events:none;bottom:-50px;opacity:0;}

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다