search

watusi / jquery-mobile-iscrollview

JQuery Mobile widget plug-in for easy use of the iScroll javascript scroller.
407 stars 183 forks source link

Address bar not hide on Android 2.3.4 native browser #107

Open newjing opened 11 years ago

newjing commented 11 years ago

I've written a very simple page as below:

<div data-role="page" id="articlePage" data-position="fixed" class="ui-responsive-panel">

    <div id="articleHeader" data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none">
      <h1>Navigation</h1>
   </div>

   <div data-role="content" data-iscroll='{"hideScrollbar":true}'>
            <p> examples</p>
            <p><br/>simply multiline texts<br/>
aaaa<br/>bbb<br/>a<br/>aaaa<br/>bbb<br/>a<br/>aaaa<br/>bbb<br/>a<br/>aaaa<br/>bbb<br/>a<br/>aaaa<br/>bbb<br/>a<br/>aaaa<br/>bbb<br/>a<br/>aaaa<br/>bbb<br/>a<br/>aaaa<br/>bbb<br/>a<br/>aaaa<br/>bbb<br/>a<br/>aaaa<br/>bbb<br/>a<br/>aaaa<br/>bbb<br/>a<br/>aaaa<br/>bbb</p>
   </div>

</div>

* no extra js *

It works well on iOS, however, on my native browser of Android 2.3.4, the address bar is always hidden first and then pushes down. Also, it cannot be hid by either refresh or orientationchange.

It feels like the jquery-mobile-iscrollview rendering shortens the height so that the address bar is dragged down.

Seeking help....................thank you, please!

newjing commented 11 years ago

Just found that the official demo "iscrollview/demo/build/index_13.html" also has the address bar problem on Android 2.3.4 (Galaxy II)

jtara commented 11 years ago

It sizes to fit the page. Unfortunately, if the address bar is shown then, of course, it sizes the page to fit under the address bar.

The code addresses this specifically for iOS and makes an adjustment for the address bar.

Unfortunately, this is likely quite difficult to impossible for Android, because of lack of standardization. On iOS, I can count on the # of pixels for the address bar to be consistent.

I'm open to suggestions and pull requests if you can figure out how to make this work across a range of Android devices and browsers.

I'm afraid the only work I do with Android is PhoneGap, and in that environment there is no address bar. So, this hasn't been a priority.

newjing commented 11 years ago

Jtata, thank you for your reply. I guess there is a workaround for all Android devices: Automatically add 100px (biggerer than any address bar height) to JQM iscrollview scrollerH and wrapperH, so that the window.scrollTo(0,1) can hide the address bar. Maybe the bottom-most part of the wrapper become invisible but it doesn't matter because bigger scrollH has added extra space in the bottom. The only concern might be the modification on pull-to-refresh accordingly.

The reason I believe the way above can work is that JQM can hide the address bar well, and the issue with iscrollview is due to (wrapperH + headerHight < deviceHeight).

It would be great if you can pull request on this, coz android fullscreen is fairly important. Thank you!