2

Hi i am using jquery mobile and alongwith the splitview plugin
http://asyraf9.github.com/jquery-mobile/
what i couldnt get around to was that why was the splitview plugin made to work only with screens which satisfy the following condition.

 var $query = $.mobile.media('screen and (min-width: 480px)') && ($.mobile.media('(-webkit-max-device-pixel-ratio: 1.2)') || $.mobile.media('max--moz-device-pixel-ratio: 1.2)'));
 $.support.splitview = ($query || ($.mobile.browser.ie && $(this).width() >= 480)) && $.mobile.ajaxEnabled;

the splitview plugin works for all screens, but there are some scrolling bugs for smaller screens which dont satisfy the above conditions. it doesnt scroll properly. cant we fix those instead of not using splitview plugin entirely if these conditions are not met.
Is there a particilar reason why these conditions were kept? Please help.

ghostCoder
  • 1
  • 9
  • 49
  • 72
  • i am having issues with the scrolling feature on the iPad and it doesn't seem to be related to the condition statements. I think there is a bug with scrolling. See - http://forum.jquery.com/topic/problem-with-scrolling-in-jqm-splitview – Peter Mar 12 '12 at 11:27

1 Answers1

1

The problem seems to be this line of CSS in jquery.mobile.splitview.css (line:75)

-webkit-overflow-scrolling:touch;

If you comment it out the scrolling bug(s) go away but the ul element has no momentum whatsoever.

It seems to be an iOS5 specific rule to enable native momentum scrolling. See http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/

CSS Fix

So that the page scrolls with momentum

#search .ui-content {
 -webkit-transform: translate3d(0, 0, 0);
}

#search-list {
 position:  static;
 overflow:  scroll;
}

Where #search is the page-id and #search list is the ul element. However now it seems as if swipe left and right have become swipe up and down respectively. Weird.

JS Fix (recommended)

On line 527 if jquery.mobile.splitview.js make the change below

//if ($.support.touch && !$.support.touchOverflow) {
if($.support.touch){

This forces the fallback code for using iScroll.js to run.

I think the JS fix works better for now.

NB: This is a known issue and there are some suggestions on how to work around it here - CSS3 property webkit-overflow-scrolling:touch ERROR

Community
  • 1
  • 1
Peter
  • 4,493
  • 6
  • 41
  • 64