Scrolling buggy, jumping around

[Erebus999]

IMPORTANT

Read and tick the following checkbox after you have created the issue or place an x inside the brackets ;)

• I have read the CONTRIBUTING.md and followed the provided tips
• I accept that the issue will be closed without comment if I do not check here
• I accept that the issue will be closed without comment if I do not fill out all items in the issue template.

Explain the Problem

The scrolling behavior is not manageable.
Neither with a scroll bar nor with a mouse wheel
In addition, automatic reading when scrolling is missing.
Currently unusable.

System Information

• News app version: Newest
• Nextcloud version:Newest

[SMillerDev]

This is not enough info to debug the issue.

[Erebus999]

When you scroll down in the "unread articles" the page reloads and then jumps to a new location.
“Normal” scrolling through the feeds is not possible.
Test Chrome and Vivaldi the same

[SMillerDev]

And what is the actual version of news? Because "newest" means nothing without knowing what release channel you are on.
And what is the browser version?
And what OS is this on?

And what is in the browser error log?

You know, the questions in the issue template...

[Erebus999]

News 25.0.0 alpha2
Nextcloud 28.0.0
Browser Chrome Version 120.0.6099.72 - Vivaldi 6.5.3206.39
Windows testet on win10 21H2 and Win11 23H2.
All the same Problem.

There is no error log.
It just jerks back and forth so scrolling through is not possible

[Grotax]

Since we haven't seen any other reports so far and also during development we didn't see that, I would suggest that you check if maybe some addon is causing this. I think you can start chrome in safe mode.

[stmichalke]

Same here, tested with the mobile versions of Chrome based Kiwi, Samsung Internet, and Firefox.

Kiwi lets me modify the concerning HTML elements: Removing 'class="virtual-scroll"' from the additional div between '.feed-item-display-container' and the '.container-window', which holds the feed-item-rows, changes the behavior back to smooth scrolling.

[Erebus999]

Since we haven't seen any other reports so far and also during development we didn't see that, I would suggest that you check if maybe some addon is causing this. I think you can start chrome in safe mode.

It's not the browser or operating system.
Even on the iPhone with Safari, the overview jumps after 4-5 news posts are scrolled through.

Emails in Nextcloud can be scrolled through very cleanly, but not news

//edit
Clean install Nextcloud and News in Docker. Same Problem
And on Reload News antime jups to discover.

[stmichalke]

The mail app doesn't use the VirtualScroll.vue component which seems to be problematic. Bookmarks does and there are problems with scrolling, too, although the structure of the items is simplier.

Maybe there is a miscalculation in the height of the items or the list.

[tgurr]

I'm also experiencing this issue both when scrolling via mousewheel (hope that can be seen as well) and also when trying to drag the scrollbar: https://github.com/nextcloud/news/assets/414984/8e8f1694-00ca-444b-999d-46af8a8b22ad

Edit: Adding another this time more obvious example you experience when using the mouse scroll wheel, slowly scrolling always just one tick, you suddenly see a jump in the whole list which makes it extremly disturbing to use/read: https://github.com/nextcloud/news/assets/414984/5c898d02-419d-4a13-83f1-06d8c84cc83c

[Ost3rbaer]

The issue is browser dependent. I have the jumping issue with FF 121.0 on Windows 10/11, but Opera 105 (Chromium 119) on Windows 10, FF 115.6esr on Linux work fine.

[Grotax]

No need for further confirmations, someone needs to analyze the code, fix it or change the component.

The code was borrowed from the bookmarks app.

[sclu1034]

While I haven't looked into the Vue code, I did check the resulting DOM and the changes to it.
The virtual scroller component ends up looking like this for me:

<div data-v-1a16f31a="" data-v-bd60c07c="" class="virtual-scroll">
    <div data-v-1a16f31a="" class="upper-padding" style="height: 1426px;"></div>
    <div data-v-1a16f31a="" class="container-window" style="height: 966px;"><!-- actual data here --></div>
    <div data-v-1a16f31a="" class="lower-padding" style="height: 3542px;"></div>
</div>

While scrolling, the height values for the two padding elements are constantly updated. Not in pixel increments, but in big chunks (a single click of the scroll wheel results in some 130px change over two increments). Notably, the chunk size does not match with the height of the actual data elements (~130px vs ~600px).

I don't know how browsers calculate their scrolling animations specifically, but changing the geometry during the animation sounds like it's going to trip them up if they don't add extra safe guards against that.

Case in point: When I'm at the very top of the list, a single click of the wheel doesn't trigger a change in those height values, it takes two or three for that to happen. And for the first one, the scrolling is perfectly fine, but once I see the values change, I also get a noticeable jump.

[pbek]

I tried to integrate https://github.com/Akryum/vue-virtual-scroller/tree/v1/packages/vue-virtual-scroller, but I wasn't able to make it work yet.