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