Open GoogleCodeExporter opened 8 years ago
[deleted comment]
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
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
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
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
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
Any luck with this....seeing the same issue...
Original comment by Sandeep....@gmail.com
on 6 May 2011 at 3:20
[deleted comment]
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
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
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
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
Original issue reported on code.google.com by
arumugam...@gmail.com
on 18 Apr 2011 at 10:38