안드로이드 웹 뷰에서 Element가 제대로 표시되지 않는 문제
내가 부딪힌 문제는 분명히 제자리에 있는 HTML 엘리먼트가 화면에 렌더링이 되지 않는 문제였다. Inspector로 찍어보기 보기 전에는 그냥 width가 안 맞아서 다음 줄로 밀린 줄 알았는데 그렇지 않았다. Inspector에서는 분명 텅 빈 하얀 공간을 차지하는 무언가가 있었다. 웃긴 점은 그 상태에서 Inspector로 눈에 보이지 않는 엘리먼트의 css를 조금만 변경하면(배경화면 색깔을 바꾼다거나) 거짓말처럼 짠 하고 자기 자리에 나타나는 엘리먼트를 볼 수 있다는 것이다. 바로 내가 의도한 페이지의 모습 그대로.
단서 1. 같은 앱을 같은 기기의 운영체제 업데이트 후에 구동하면 페이지가 잘 나온다. 단서 2. 모바일 크롬 브라우저로 봤을 때는 페이지가 잘 보인다.
이게 웹뷰 버그라는 의혹이 짙어졌지만 문제는 제품 특성상 운영체제 업그레이드를 강제하는 것이 꽤 힘든 상황이라는 점이다.
결론적으로 바이너리 업데이트 없이 문제를 해결하기 위해 유령 엘리먼트에 다음 CSS를 추가하였다.
transform: translateZ(0);
GPU로 하여금 엘리먼트가 3D인 것처럼 착각하게 해서 퍼포먼스를 향상시키는 트릭인데 원인은 모르지만 렌더링이 생략되는 현 상황에서 유효할 것으로 예상하였다.
그리고 예상대로 문제가 해결되었으나 정확한 원인이 밝혀지지 않은 점은 조금 불만스럽다.