-
[모바일,안드로이드] a버튼이 눌리지 않고 하단이 눌리는 경우FrontEnd/버그리포트 2015. 8. 24. 13:08
상황
* 화면상에서 링크는 있으나, 터치가 잘 안눌리는 현상이 있다.
* position:fixed로 된 element안에 링크가 있고, 터치가 잘 안되는 상황.
* 안드로이드버전 크롬일경우에 많이 발생,
해결법
1. 이벤트가 먹히지 않는 div엘리먼트에 "-webkit-transform : scale3d(1,1,1);" 또는 "opacity: .99" 을 적용한다.
2. 공통 CSS부분에 "-webkit-backface-visibility:hidden;backface-visibility:hidden;" 을 추가한다.
원인분석
나름 haslayout의 개념이 들어가 있다. (랜더링상으로 정확한 터치영역에 대한 정확한 랜더링이 안된상태)
최종원인분석결과
1. 안드로이드의 transform버그(transform에 의해서 변경된 DOM의 터치좌표를 정확하게 인지 못하는 버그)
2. 안드로이드의 position:fixed버그(fixed 하위에 있는 position은 랜더링은 absolute여도 터치영역은 relative로 인지하는 버그)
출처
http://stackoverflow.com/questions/13634470/webkit-haslayout-bug
http://stackoverflow.com/questions/11002195/chrome-does-not-redraw-div-after-it-is-hidden