Android에서 Webview를 사용할때 Position문제

JavaScript Titanium
1

Webview를 사용해서 앱 내부 Asset폴더안에 있는 html을 불러와 보여주고있습니다.

하지만 div에 css스타일을 position absolute, fixed를 사용하면 아예 화면에 보여지지도 않는 문제가 있네요 ㅜㅜ

html, body 그리고 부모 div들까지 position relative를 넣어보고 별짓 다해봤는데 문제가 해결되진않았습니다.

웹뷰 자체의 버그인지 모르겠습니다 ㅠㅠ 해당 html파일을 PC나 Mobile Chrome으로 열어봐도 잘 열리거든요…

문제를 해결할 팁이나 조언을 주실 분 계신가요? ㅠㅠ

2

이럴 땐 문제가 되는 코드를 올려주셔야 다름 분들이 뭔가 찾을 수도 있어요. ^^

3

코드를 첨부하자니 HTML, CSS, JS랑 타이타늄 JS등 온갖 코드가 섞여있어 올리기가 애매해서 글만으로 올렸습니다. 혹시 Webview에 position:absolute관련 버그가 있나 싶어서요…;;

더 웃긴건 Genymotion의 애뮬레이터에선 문제없이 나타나는 HTML과 CSS스타일이 제 폰에서 실행했을때만 position 관련 문제가 생긴다는 점입니다… 코드상에 아무런 변화없이 기기만 달리했을뿐인데…

웹뷰 엔진의 문제일까요?

4

저도 그것 때문에 삽질 했었는데요.

docs의 webview를 보시면 왜 그런지 써있습니다.
http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.WebView

요약하자면 4.4부터 웹뷰 브라우저가 변경되었는데, 이게 높이를 제대로 받지 못하는 문제가 있습니다.
ti sdk의 문제는 아니고 android의 문제입니다.

해결 방법은 문서에 있는데로 onresize 이벤트를 사용해야 합니다.
요령은 웹뷰를 원하는 레이아웃보다 높이를 좀 작게 부른다음에, load가 끝나면 높이를 키우면 됩니다.

var webview1 = Titanium.UI.createWebView({
	url: '/html/GMapsDirection.html',
	width: '100%',
	height: '70%'
});
webview1.addEventListener('load',function(e) {
	webview1.height = '100%';
});
$.***.add(webview1);

그리고 html 파일 안에서는 이렇게 처리합니다.
body 안에 제일 기본이 되는 div의 높이를 재정의 해주면 안쪽에 있는 애들도 다 맞아집니다.

window.onresize= function(){
                document.getElementById("main").style.height = window.innerHeight + 'px';
        };

그리고,
borderRadius를 주는 꼼수도 있는데, 이 경우 h/w가속이 꺼져서 웹뷰의 성능이 심각하게 나빠지니 추천드리지 않습니다.

1개의 좋아요
5

와 진짜 감사합니다 ㅠㅠㅠㅠ 어차피 간단한 정보 노출용이라 크게 느려져도 상관은 없습니다. 덕분에 문제가 해결되었네요!!! 정말 감사합니다 ㅠㅠ

진짜 개떡같이 질문드려도 찰떡같이 답을 주시네요 ㅠㅠ

6

또 포럼 팁 한가지 알려드리자면 관련 있는 글을 링크로 남기면 서로 연결됩니다. 각 토픽의 오른쪽을 보면 서로 링크가 연결되게 됩니다. 같은 글을 양쪽에 쓰시기 보다는 이렇게 연결해두면 서로 관련 토픽들이 묶여서 좋아요.^^

http://tidev.kr/t/android-4-4-webview/870/4?u=yomybaby

연결하게 되면 아래와 같이 표시됩니다.