Focus on a input in a table will cause auto scrolling to top under jQuery 3

[tommyxst]

If we put a text input on the bottom of a long table and when focusing on it, the scroll bar will be automatically scrolled to the top of the page. This problem only happens under jQuery 3. To solve this problem, you need to add position attribute to the input.

After debugging I found that it may be caused by the changing of jQuery position() function. In the older version of jQuery (at least in jQuery 2.2.4), position() function used jQuery.offsetParent() to find element's parent who is positioned, however, in jQuery 3, they changed to use native offsetParent to locate the parent, which will cause some problem in tables. According to MDN doc, if the element is non-positioned, the nearest table, table cell or root element will be returned.

I wrote a snippet to reproduce this problem. You can check here. Although jQuery 3 uses native offsetParent in position() function but jQuery.offsetParent() can still return to .jsPane because it uses a loop to find the element whose position attribute is set so in the snippet console you can see if you comment "position: relative" in css file, the offsetParent will be different and auto scrolling will happen if focusing on the last input but if position attribute is added, it will work well.

I know it may not be a big deal to add a "position: relative" but I thought this worth to telling you and maybe some help will be made. Thank!

[vitch]

Thanks for the detailed report.

Unfortunately I don't have time to work on this project any more. If there is a solution that can be added to jScrollPane then I would be happy to merge a pull request though.

[illuusio]

Strange behavior actually. As @vitch please submit pull request or I have to take look at when I have time and this bugs me.

[illuusio]

Actually this is duplicate of #333 or is this the case? So this is not jQuery 3 problem but should be sorted out.

[illuusio]

Started to solve this but can't find how to make it jump to top in fiddle linked?

[tommyxst]

Started to solve this but can't find how to make it jump to top in fiddle linked?

comment "position: relative" in css first, then click the last text input

[DavidBruchmann]

I recognize problems when it's getting difficult to calculate the height of the content-area, i.e. floating text without strict width or images without defined measures. One problem in my case was that scroll-to-top an touch-move seem competing against each other.

[illuusio]

Is this still Issue with Git code?

[DavidBruchmann]

I use v2.2.3-rc.1 and have the described issue primary related to the images. Depends on the device too, how well it manages calculations. On desktop it's nearly not remarkable but on my mobile it's an annoying scrolling-blocker.

[illuusio]

Have debugged where calculation goes false?

[DavidBruchmann]

No i didn't debug it, the issue is probably that different event-handlers for touching and scrolling compete, especially if the window-width is wider than the device-width. The behavior then is that it scrolls always to top. Depending on the amount of images it's possible that after scrolling a few times down, the calculations at some time are finished and the automatic scrolling to top is stopping, so that the site can be seen completely.