touchOverflowEnabled: Deprecated in 1.1.0
jQuery Mobile 1.1 이전에서는 true fixed toolbar 지원이 touch에 대해 overflow-scrolling 하는 CSS 프로퍼티로 native browser 지원이 가능했었습니다. 지금은 iOS5에서만 지원되고 있습니다. jQuery Mobile 1.1 버전에서는 이 CSS 프로퍼티를 더 이상 사용하지 않습니다. 우리는 이 프로퍼티를 내부적으로 사용하는 부분을 모두 없앴습니다. 하지만 이미 이 프로퍼티를 사용하고 있는 어플리케이션에 문제가 발생하지 않도록 $.mobile 객체에 글로벌하게 정의해 놓고 있습니다. 이 프로퍼티는 remove 하라고 flag 되어 있습니다. 하지만 아직까지 $.support 를 통해서 남아있고 지금 현재로서는 이것을 완전 remove할 계획을 가지고 있지는 않습니다.
현재 보이는 화면과 앞으로 전환될 화면은 viewport에 나란히 있습니다. 이 화면전환이 아래쪽으로 된다면 이 두 페이지가 화면전환이 시작될 때 같은 viewport에 있어야 합니다. 그리고 손가락을 위쪽으로 해서 scroll을 하겠죠. 그러면 그 다음 화면이 밑에서부터 따라 올라올 겁니다. 만약에 back button을 클릭한다면 scroll up 하고 화면전환을 하고 이전 scroll position을 저장해야 합니다 .아직까지 모바일 브라우저의 속도가 느린편이라 이 스크롤 움직임은 실제 유저의 움직임을 따라가지 못할 수 있습니다.
이러한 문제점을 극복할 방법은 두 페이지를 각각의 콘테이너에 담는것입니다. 각각은 나름대로의 internal scroll bark 를 가지고 있습니다. 이 의미는 document를 더 이상 scroll 할 필요가 없다는 것이죠. 혹은 좀 더 자연스럽게 스크롤 포지션을 저장하는 것이 필요하다는 겁니다. fixed toolbar들을 만들어서 internal scrolling 과 함께 바깥의 콘테이너에 넣음으로서 이를 쉽게 구현할 수 있습니다.
How it works
overflow:auto 의 touch-targeted version을 지원하는 iOS5 를 한번 보죠. 여기에서는 native momentum scrolling과 함께 internal scrolling region을 허용합니다. 우리는 여기에 touchOverflow 라는 기능을 추가했습니다. 이 기능은 이 두개의 true "fixed" toolbar들을 사용할 수 있는 새로운 CSS capability들을 가능하게 합니다. 그로 인해 iOS5에서 아주 부드럽게 화면전환이 일어나도록 만들죠. 모두 웹 표준을 사용하고 있고 약간의 코드를 추가했습니다.
이 기능은 touchOverflowEnabled 라고 부르는데 CSS에서 overflow scrolling을 지원할 미래의 브라우저를 위해 디자인 됐습니다. 이 기능은 최고의 퍼포먼스를 위해 아직 테스트와 디버깅이 필요하기 때문에 디폴트로 off 상태입니다. 조만간 이 기능을 on 으로 활성화 할 수 있기를 바랍니다. 아래에 이 global option을 어떻게 enable 시키는지 예제가 있습니다.
<script>
$(document).bind("mobileinit", function(){
$.mobile.touchOverflowEnabled = true;
});
</script>
이 기능이 activate 되면 프레임워크는 이 두 overflow를 브라우저가 support 하는지 찾게 됩니다. 그리고 -webkit-overflow-scrolling:touch
CSS properties 를 찾게 되죠. 이 두가지를 지원하는 브라우저에서는 native overflow와 함께 dual page container 모델로 switch 합니다. 그래서 각각의 안에서 스크롤링을 하게 되어 true fixed toolbars smooth transition이 일어나도록 하죠. 이렇게 하면 native performance에 아주 가까운 인터페이스 build를 가능하도록 해 줍니다.
이 기능의 demo 를 보시려면 iOS5의 이 페이지를 체크하세요.
A few downsides
새 기능인 경우 완벽할 수는 없습니다. 이 기능을 activating 할 때 몇가지 고려해야 할 사항들이 있습니다.
- 리스트나 form 같은 child element들은 가끔 iOS5에서 overflow된 페이지내의 embedded 일 때 render를 하지 않는 경우가 있습니다. 아주 random 하게 일어나는 현상이지만 그냥 둘 수는 없는 문제죠. 그래서 우리는 translage-z CSS 프로퍼티를 추가해서 IOS가 content를 render 하도록 force 하고 있습니다. 이 경우의 단점은 transform이 apply 됐을 때 모든 elements들은 relative 로 포지션이 set 되서 여러분의 layout에 어떤 이슈가 발생할 수가 있습니다.
-webkit-overflow-scrolling:touch는 status bar 를 tap 했을 때 위에서 아래로 스크롤 하는 이벤트가 제대로 작동하지 않는 것 같습니다. 애플에서 이와 관련해서 개선해주기를 바랍니다. 왜냐하면 이 기능은 아주 필요하거든요.
- overflow이고
-webkit-overflow-scrolling:touch 프로퍼티가 세팅돼 있을 때 iOS는 그 parent의 (우리의 경우는 page) 어떤 overflow:hidden 프로퍼티도 무시하는 현상이 나타납니다. 그래서 viewport보다 넓은 이미지나 코드 블럭이 있다면 horizontal scrolling 이 나타납니다.
- 이 기능이 active 일 때 메타 viewport 태그를 사용하게 되면 유저 zoom 이 제대로 작동하지 않게 됩니다. 왜냐하면 툴바와 페이지 콘텐트 모두 이상한 size로 zoom될 수 있고 다시 zoom back out 하는것이 무척 어렵기 때문입니다. 이런 이상한 현상을 완화하기 위해 우리는 fixed toolbar와 overflow container를 사용하는 것이 더 중요하게 됩니다.
- re-load 된 페이지로 되돌아갈 때 스크롤 포지션을 잃어버릴 수가 있습니다. 만약 DOM caching이 on 상태이면 이런 이슈는 거의 발생하지 않을 겁니다.
- 이 기능은 아직까지 실험적입니다. 그러니까 이런 이상한 현상들이 모두 해결된 상황은 아닙니다. 주의해서 사용하시고 항상 테스트를 하세요.
Don’t other mobile platforms already support overflow?
예 다른 플랫폼도 overflow를 지원합니다. 안드로이드의 허니컴과 블랙베리의 플레이북도 overflow를 지원합니다. 하지만 저희가 테스트해 본 결과 그 기기들에서의 overflow는 부드럽지 않습니다. 페이지들은 버벅거리거나 스크롤링 동안에 잠깐씩 멈칫멈칫 합니다. 저희들은 이 기계 제조사들에게 이 기능이 개선되어야 한다고 의견을 제시하고 있습니다.
더 중요한 것은 overflow가 정확하게 되어야 하는것입니다. 우리가 그냥 간단하게 페이지의 auto CSS rule에 overflow를 설정해 놓으면 안드로이드나 iOS의 이전 버전이면서 많은 사람들이 사용하는 플랫폼에서는 내용의 나머지 부분이 잘려나갈겁니다. (iOS의 경우에는 이런 경우 two-finger scroll을 할 수 있을 겁니다. 하지만 아무도 모르고 있을 겁니다.) iOS5에서 애플은 CSS 프로퍼티 -webkit-overflow-scrolling:touch 를 추가했습니다. 현명한 조치라고 생각합니다. 이렇게 함으로서 저희들은 이 touch 스크롤링 프로퍼티를 테스트할 수 있었습니다. 그래서 만약 이 기능을 지원한다면 그 브라우저에서는 overflow rule을 추가할 수 있겠죠.
우리는 이 CSS-based 프로퍼티들을 지원해 달라고 디바이스와 브라우저 개발사들에게 요청하고 있습니다. 왜냐하면 이 기능이 rich mobile 웹 앱을 만드는데 아주 중요한 요소가 될 거라고 믿기 때문입니다. 만약에 오페라, 파이어폭스, 마이크로 소프트같은 회사에서 이 기능을 지원하면 우리는 이 touch scrolling property를 위해 vender-prefixed additions를 추가할 것입니다. 사람들이 IOS5에서 얼마나 페이지 전환이나 fixed toolbar들이 더 훌륭하게 진행되는지를 보게 되면 다른 브라우저들에서도 하루빨리 이 기능을 적용할 거라고 기대합니다. JS-based scroller script들은 새로운 CSS capability 들이 지원되지 않는 브라우저에 polyfill로서 존재하고 있는 상황입니다. 우리는 모바일 웹의 잠정적인 개선사항을 다루는 툴을 통해 간단하게 이 기능을 볼 수 있을 뿐입니다.
Debugging touchOverflow
일반적으로 touchOverflow 는 overflow area의 touch-scrolling을 지원하는 디바이스에서만 가능합니다. 데스크탑에서는 가능하지 않습니다. 그래서 이 touchOverflow 기능을 디버깅하는것이 어렵습니다. 이 touchOverflow 를 모둔 브라우저에서 가능하도록 하려면 아래 예제처럼 하세요.
<script>
$(document).bind("mobileinit", function() {
$.support.touchOverflow = true;
$.mobile.touchOverflowEnabled = true;
});
</script>
themingpages.html
