iscroll select tag issue

[GoogleCodeExporter]

When clicking on a select input that is *towards the bottom* of the scrollable 
area, and the native iPhone UI appears on the bottom, the content within the 
wrapper is shifted up. When you close the select options, you can only view the 
area from the bottom of the content minus the mask height– you can’t scroll 
up past the bottom-most visible area. I tried calling the refresh() method on 
the change event of the select input but that doesn’t seem to work.

Original issue reported on code.google.com by arumugam...@gmail.com on 18 Apr 2011 at 10:38

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I have the same issue in both mobile and desktop safari when the select is near 
the bottom of the scrollable area. For me it doesn't shift if the select is at 
the bottom of the area shown on screen if the height of the hidden scrollable 
area further down on the page is larger than the select popup. If the select 
popup is larger than the scrollable area further down the page it will jump by 
about the height of the select popup.

Digging into the html source, when safari jumps it isn't increasing the 
transform values. I had it reset the jump intermitently by rotating the ipad 90 
degrees. When the jump happened, I found that intermittently the location that 
buttons and active regions were shown were not where they "really" were. 
Clicking on them would do nothing but clicking on where they should have been 
and were not drawn on screen would trigger the expected actions. This jump 
seemed to happen more often in landscape mode than portrait mode, but that may 
be due to working more in landscape mode.

I tried this with the jQuery Mobile scrollview component and got this same bug. 
I was able to restructure my form so the selects were not at the bottom which 
does work as a workaround for the time being.

If you are not able to restructure your form, you can add a return as the first 
line in the _resetPos function to block out any position resets. This will 
allow you to scroll as much as you want so you can get back to the top of the 
scroll. However it will also allow you to scroll the page off screen and not 
able to scroll back again. It also makes the scroll look non-native, but it 
might help you debug.

Good luck working on this.

Original comment by hogar...@gmail.com on 19 Apr 2011 at 3:28

[GoogleCodeExporter]

can u please tell how to create hidden scrollable area. and _resetPos code.

Original comment by tsara...@gmail.com on 20 Apr 2011 at 6:01

[GoogleCodeExporter]

The basic structure of the code looks like:

<div id="wrapper">
  <div id="scroller">
    <!-- all scrolling content here -->
  <div>
<div>

The id's don't really matter. You can call them whatever you want as long as 
you use the same id to initialize your iScroll object. I'm just using these ids 
to clearly define what I'm explaining. Wrapper is the node that the iscroll is 
applied to and scroller is a div which holds all the content you want to 
scroll. Any siblings of scroller will not scroll as only the first child of 
wrapper will scroll. You can set the height on wrapper to be the height you 
want the scrollable region to be. Don't limit the height of scroller, as it 
should be allowed to overflow outside of wrapper. The overflow will be hidden 
and then shown when you scroll. This overflow of scroller is what I mean by the 
hidden scrollable area. If there is overflowed content below a select larger 
than dropdown/popup of select options, even if it is not shown on screen, this 
problem should not happen. If the list of select options is larger than the 
remaining overflow, this problem will occur.

For the _resetPos code, I am using the iscroll-lite code to reference line 
numbers. Take a look at lines 359-362, they should look like:

_resetPos: function (time) {
  var that = this,
    resetX = that.x,
    resetY = that.y;

To disable the scroll limits to see the top of your form, either comment out 
all the code in the _resetPos function or change like 359 to:

_resetPos: function (time) {

  return;

  var that = this,
    resetX = that.x,
    resetY = that.y;

However, this is a workaround. Ideally you should be able to resize the sizes 
of the elements and move selects to not be at the bottom so you do not have to 
use this workaround. This workaround is good for testing, but does not fit with 
a native look-and-feel. I spent a lot of time resizing heights so that wrapper 
was the size I wanted and all other content was overflowed properly so it 
scrolled nicely without this workaround. However, I did find this workaround 
was very useful while I was resizing all the heights.

Original comment by hogar...@gmail.com on 21 Apr 2011 at 4:36

[GoogleCodeExporter]

Thanks works fine. but that doesn't resets scroll position to its origin when 
it reaches end. looks the app gone ugly. is there any fix to stop the shifiting 
up of div when it hits scroll end. and that will only helps fine.

Original comment by tsara...@gmail.com on 23 Apr 2011 at 7:07

[GoogleCodeExporter]

What steps will reproduce the problem?
1.Create a select box near or at the bottom of the scroll
2.Hit select box - u can see the scroll jumps upward and white screen during 
select box selection 
3.The scroll cannot be able to move back to top due to shift in scroll position.

What is the expected output? What do you see instead?
Normal scrollable area through top to bottom is expected output and scroll not 
going to top of div 

What version of the product are you using? On what operating system?

Version 3.6 Ipad 1 Ios

Please provide any additional information below.

Click the select input "towards the bottom" of the scrollable area,the content 
within the wrapper is shifted up. When you close the select options, you can 
only view the area from the bottom of the content minus the mask height– you 
can’t scroll up past the bottom-most visible area. I tried calling the 
refresh(),resetPosition() method on the change event of the select input but 
that doesn’t seem to work.

Original comment by kannasha...@gmail.com on 26 Apr 2011 at 7:02

[GoogleCodeExporter]

Any luck with this....seeing the same issue...

Original comment by Sandeep....@gmail.com on 6 May 2011 at 3:20

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Any news about this? Really needs this fixed and can't find a way to get it 
work in a nice way.

Original comment by lindabos...@gmail.com on 30 Jun 2011 at 7:20

[GoogleCodeExporter]

I ran into the same problem and couldn't find a really satisfying fix for it. 
Any recent developments on this?

Original comment by mastren...@googlemail.com on 11 Nov 2011 at 2:51

[GoogleCodeExporter]

I ran into the same problem and couldn't find a really satisfying fix for it. 
Any recent developments on this?

Original comment by mastren...@googlemail.com on 11 Nov 2011 at 2:51

[GoogleCodeExporter]

I have had this problem on the iPad and found that if you set useTransform to 
false in the iScroll constructor the problem does not seem to appear anymore.

I have:

myScroll = new iScroll('wrapper', {useTransform: false, onBeforeScrollStart: 
null});

Original comment by michael....@neonstingray.com on 21 Aug 2012 at 6:29