My favorites | Sign in
Project Home Downloads Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 56: iscroll select tag issue
9 people starred this issue and may be notified of changes. Back to list
Status:  New
Owner:  ----


 
Reported by arumugam...@gmail.com, Apr 18, 2011
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.

Apr 19, 2011
#2 hogar...@gmail.com
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.
Apr 19, 2011
#3 tsara...@gmail.com
can u please tell how to create hidden scrollable area. and _resetPos code.

Apr 21, 2011
#4 hogar...@gmail.com
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.
Apr 23, 2011
#5 tsara...@gmail.com
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.
Apr 26, 2011
#6 kannasha...@gmail.com
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.

May 5, 2011
#7 Sandeep....@gmail.com
Any luck with this....seeing the same issue...
Jun 30, 2011
#9 lindabos...@gmail.com
Any news about this? Really needs this fixed and can't find a way to get it work in a nice way.
Nov 11, 2011
#10 mastren...@googlemail.com
I ran into the same problem and couldn't find a really satisfying fix for it. Any recent developments on this?
Nov 11, 2011
#11 mastren...@googlemail.com
I ran into the same problem and couldn't find a really satisfying fix for it. Any recent developments on this?
Aug 20, 2012
#12 michael....@neonstingray.com
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});

Powered by Google Project Hosting