Chrome 59 seems to break infinite scrolling

[robertdempsey]

Hello,

I've recently encountered an issue using Chrome 59 that is reminiscent of pre angular-ui-scroll 1.6 behaviour in regards to overflow anchoring.

Basically, scrolling up is quite erratic, sometimes taking forever to load more results or sometimes skipping/jumping multiple sections. Pretty much the same behaviour that I noticed before upgrading to version 1.6+.

I've tested with the following scenarios:

angular-ui-scroll: 1.6.1
PC with Chrome 59: erratic upwards scrolling
ChromeOS tablet with Chrome 59: erratic upwards scrolling
ChromeOS tablet with Chrome 56: perfect upwards scrolling
ChromeOS tablet with Chrome 58: perfect upwards scrolling

This is quite problematic as I will have to upgrade my tablets to Chrome 59 in the very near future. Any idea what might be causing this behaviour?

Thanks in advance

[dhilt]

@robertdempsey Hello! I took Chrome 59.0.3071.115 on Win 10 and doesn't see your problem.

Looking back, the issue of Scroll Anchoring Chrome 56 was fixed with the ui-scroll v1.6.1 release – #138 – is it something you have? If yes, you should inspect your rendered html code and make sure that the ui-scroll-viewport element has "overflow-anchor: none;" css rule. The ui-scroll forces it during linking, but maybe something overrides it?

If no, we need more details. What OS, what demo (our demos?) and others that may help.

[robertdempsey]

Hi dhilt,

Thanks for the reply! I have seen this attribute on the ui-scroll-viewport element (oddly enough I have seen it since 1.6.0 even though it was meant to have only gone in in 1.6.1) but will confirm that nothing is overriding it tomorrow.

On 1.6.0 and 1.6.1 everything works fine with Chrome 56 and 58, but starts to break with Chrome 59 (also Windows 10)

[dhilt]

@robertdempsey I definitly can't reproduce it. Let's say we are trying this demo. I recorded a short video to demonstrate my behavoiour: https://www.youtube.com/watch?v=zoDHQGrKU_A; and it works as it should. What I'm doing wrong?

[robertdempsey]

@dhilt cheers for going to the trouble of making a video! If you compare the visual effects of scrolling down to scrolling up in that video you can see that elements load quickly and are added smoothly when scrolling down. But when scrolling up there are periods of the whole viewport being white and elements taking longer to load.

On Chrome 56 and 58, both my downwards scrolling and upwards scrolling experiences are perfectly smooth. But on Chrome 59 my upwards scrolling exhibits similar display issues to those in your video. Sometimes I will need to wait seconds for new results to get added to the top of the list, while other times my list will disappear completely and re-render seconds later with new items.

This is the kind of behaviour I saw before the overflow-anchor: none fix was implemented. I will check in a few hours if it might be getting overridden in Chrome 59 as you suggest.

Once again, thanks.

Rob

[dhilt]

@robertdempsey The behaviour you described is a designed thing, this results from the 100ms delay, which is for the remote emulation. Look at the Cache demo, where is no delay for repeated requests. Or just try to remove setTimeout at all from the demo...

Look, I set up a new demo with no delay on plunker: https://plnkr.co/lxCDHA. Yes, it may jump a bit on some edge cases, but this is expected behaviour, and whiteness becomes visible only when going fast through more than 500 rows.

[robertdempsey]

@dhilt designed or not, those kind of delays are what I am seeing when I scroll upwards on Chrome 59 and I have no timeouts or remote fetching when retrieving results.

I will try to upload some videos of my own comparing Chrome 58 and 59 as the differences I am seeing are quite pronounced (Chrome 58 is perfectly smooth while Chrome 59 is unusable in my case).

It may take me a few working days to get the videos up. Thanks for your assistance with this so far.

Rob

[robertdempsey]

Hi @dhilt,

I tried your branch and it didn't seem to make things any better, but I couldn't tell if they were worse. I will work on getting a repro for you tomorrow, or at least a video showing the differences in behaviour between Chrome 56 and 59.

I'm going to amend the title of this issue as it breaks any scrolling, be it upwards or downwards.

Thanks a lot for your continued assistance with this and for the hard work on the library.

Rob

[robertdempsey]

@dhilt I tell a lie, I have just tried your branch at https://github.com/angular-ui/ui-scroll/tree/sync/dist again with Chrome 59.0.3071.91 and it seems to be working perfectly now. Potentially even better than it was before Chrome 59 with the current production build.

Thanks a tonne for your work on this and I'm sorry I couldn't provide better information for you to diagnose it. I'll continue testing and let you know if it's all still going smoothly in a bit.

Cheers!

Rob

[dhilt]

v1.6.2 is released, I'm closing this issue, thanks for your words!

[robertdempsey]

Sorry @dhilt, I've just installed 1.6.2 and I'm seeing the same issues I was earlier. More specifically, if I scroll to the top (my scrollbar actually reaches the top), there is a pause of 0.5s or so before new results are loaded. Using your branch the file from here https://raw.githubusercontent.com/angular-ui/ui-scroll/sync/dist/ui-scroll.js however works perfectly - new elements are loaded well before my scroll bar reaches the top.

I'm currently using:
angular: 1.5.8
buffer-size: 14
padding: 1

For now I'll overwrite what is in my node_modules folder manually with this file, but if you have any free time could you possibly diff the 1.6.2 file with what's in your branch and see what might be causing it?

[dhilt]

@robertdempsey My plan was to release a separate 1.6.3 (or even 1.7.0) release right after 1.6.2, cause that changes (the sync branch I mean) are very important. I did not expect the difference's so significant...