Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrolling buggy, jumping around #2498

Open
3 tasks done
Erebus999 opened this issue Dec 15, 2023 · 15 comments
Open
3 tasks done

Scrolling buggy, jumping around #2498

Erebus999 opened this issue Dec 15, 2023 · 15 comments
Labels
bug frontend impact Javascript/Frontend code help wanted

Comments

@Erebus999
Copy link

Erebus999 commented Dec 15, 2023

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
@Erebus999 Erebus999 added the bug label Dec 15, 2023
@SMillerDev
Copy link
Contributor

This is not enough info to debug the issue.

@SMillerDev SMillerDev closed this as not planned Won't fix, can't repro, duplicate, stale Dec 15, 2023
@Erebus999
Copy link
Author

Erebus999 commented Dec 15, 2023

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
Copy link
Contributor

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
Copy link
Author

Erebus999 commented Dec 15, 2023

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 Grotax reopened this Dec 18, 2023
@Grotax Grotax changed the title Scrolling Scrolling buggy, jumping around Dec 18, 2023
@Grotax
Copy link
Member

Grotax commented Dec 18, 2023

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
Copy link

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
Copy link
Author

Erebus999 commented Dec 18, 2023

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
Copy link

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
Copy link

tgurr commented Dec 19, 2023

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

@Grotax Grotax added the frontend impact Javascript/Frontend code label Dec 19, 2023
@Ost3rbaer
Copy link

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.

@Erebus999

This comment was marked as duplicate.

@pil-in-a

This comment has been minimized.

@Grotax
Copy link
Member

Grotax commented Jan 12, 2024

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
Copy link

sclu1034 commented Mar 15, 2024

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
Copy link
Member

pbek commented Jun 8, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug frontend impact Javascript/Frontend code help wanted
Projects
None yet
Development

No branches or pull requests

9 participants