하이브리드앱을 jquerymobile과 같이 개발하는 경우 jquerymobile css에서 오류가 발생한다.
오류는 일부 안드로이드 기기의 버젼 4.0.* 에서 발생하고 있으며, 발견된 기기는 갤럭시노트1, 갤럭시S2 에서 ICS 4.0.4 에서 발견되었다.
발견된 오류는 select box 에서 터치시 select box가 열리기 않고 앱이 종료되는 문제가 발생했다. 사용한 jquerymboile의 버젼은 1.3.1 이었다.
해당 버젼의 jquery.mobile-1.3.1.css 의 line 3170 의 -webkit-transform: translate3d(0,0,0); 에서 문제를 일으켰다.
-webkit-transform: translate3d(0,0,0); 부분을 주석처리후 오류없이 잘 동작을 했다.
해당 부분의 전체 style은
/* hardware acceleration for smoother transitions on WebKit browsers */
.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal),
.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal) > div,
.ui-panel-animate.ui-panel-closed.ui-panel-display-reveal > div,
.ui-panel-animate.ui-panel-content-wrap,
.ui-panel-animate.ui-panel-content-fixed-toolbar {
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
}
이다.
혹시 하이브리드앱을 개발할때 select box 사용할대 이와 같은 오류가 발생시에 jquerymobile style파일에서 위 부분을 찾아서 주석처리를 해주면 된다.