react-infinite-scroll-component icon indicating copy to clipboard operation
react-infinite-scroll-component copied to clipboard

fix: scrollTop issue on mobile in inverse mode

Open vj-abishek opened this issue 3 years ago • 12 comments

Fixes #242

The issue is when we use flexDirection: 'column-reverse' . The scroll bar is set to the bottom. On desktop the scrollTop ends with 0 if it reaches the bottom. But it mobile scrollTop behaves oppositely due to flexDirection: 'column-reverse'. The scrollTop starts from 0 at the top in mobile.

An example which breaks on mobile: Link (check on mobile)

An example which works on mobile Link (check on mobile)

vj-abishek avatar Feb 21 '21 06:02 vj-abishek

Thanks @vj-abishek @ankeetmaini any plans to merge this fix?

s-kris avatar Mar 17 '21 17:03 s-kris

Can a test be added for this fix? Will make it easier for me to merge

ankeetmaini avatar Mar 17 '21 17:03 ankeetmaini

It seems like browser issue. Before making this pull request I tested in brave browser and chrome. Both breaked. After some days I updated brave browser. Now when I test this. It is working in brave but breaking in chrome(current solution).

Mine solution(working in both browses) and current solution is also working (current solution is working only in brave).

I will test and say if it is worth to merge.

vj-abishek avatar Mar 18 '21 01:03 vj-abishek

Any please try to open those link and say if it works or breakes in mobile.

vj-abishek avatar Mar 18 '21 01:03 vj-abishek

Strangely, both of the links work in chrome android.

s-kris avatar Mar 18 '21 03:03 s-kris

This bug affects normal mode too. (not just inverse mode)

s-kris avatar Mar 18 '21 06:03 s-kris

@s-kris I got exams so only didn't have time to work on it.

vj-abishek avatar Mar 29 '21 00:03 vj-abishek

Hey @vj-abishek no explanation needed :) Wish you the best!

s-kris avatar Mar 29 '21 06:03 s-kris

@s-kris it looks like browser issue on mobile. It seems they fixed it. I think it works in latest browsers. Only won't work in browsers which is not using latest version.

vj-abishek avatar Apr 02 '21 07:04 vj-abishek

I'm using default mode (not inverse mode). Just tested in chrome android (latest version), firefox + edge + chrome on macbook but as mobile mode using developer tools but still not working. Fetch more function is not called.

s-kris avatar Apr 02 '21 07:04 s-kris

After testing in mobile devices I came to one conclusion This breaks in Chrome: 80.0.3987.99(android) or below But works in Chrome: 88.0.4324.182(android)

And Normal scroll works correctly for me. If it is not working say me the chrome version, I will test it. It works in chrome 80 or above

And reverse scroll is breaking in chrome 80 or below(android), due to the above mentioned issue.

I don't know what to do for my app, If chrome version is 80 , it is working correctly(reverse scroll) due to my code . But it is chrome 88 It breaks. Some of the users updated chrome. And some didnt including me because there is some issue in updating chrome android. So infinite scroll not working for some users 😣

vj-abishek avatar Apr 11 '21 08:04 vj-abishek

@s-kris could you provide any example code which breaks in mobile (normal scroll). I will test it

vj-abishek avatar Apr 11 '21 08:04 vj-abishek