Thanks to visit codestin.com
Credit goes to github.com

Skip to content

initialScrollIndex followed by scroll-up leads to unexpected scroll on Chrome #1783

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

Closed
zarko-tg opened this issue Sep 19, 2024 · 2 comments Β· Fixed by #1787
Closed

initialScrollIndex followed by scroll-up leads to unexpected scroll on Chrome #1783

zarko-tg opened this issue Sep 19, 2024 · 2 comments Β· Fixed by #1787
Assignees
Labels
🐞 Bug Bug: Something isn't working </> Template @rx-angular/template related

Comments

@zarko-tg
Copy link

Description

I'm observing a wrong scroll / displayed items when scrolling up from the set initialScrollIndex.
When the top shown value is say 5, and scrolling up, I expect to see the 4, 3, 2 etc., not 12, 11, 10...

The chosen container size, number of items, item height and initialScrollIndex in the demo code may seem picked random but the issue occurs given those for some reason. And only on desktop Chrome. No issue with desktop Safari.

Steps to Reproduce the Issue

https://stackblitz.com/edit/stackblitz-starters-ptaye3?file=src%2Fmain.ts

Environment

Chrome: 129.0.6668.59 stable
Angular CLI: 18.x
Node: 20.17.0
OS: macOS 15.0

Angular: 18.x
Ivy Workspace: Yes
@rx-angular/template: 18.2.0

Workaround

Not aware of any straightforward workaround.

@hoebbelsB
Copy link
Member

looking into it, thanks

@hoebbelsB hoebbelsB self-assigned this Oct 1, 2024
@hoebbelsB hoebbelsB added 🐞 Bug Bug: Something isn't working </> Template @rx-angular/template related labels Oct 1, 2024
@hoebbelsB
Copy link
Member

hey @zarko-tg, either that bug existed for ever or something changed in how chrome performs rendering internally. Anyway, i've figured out what's the issue.

With your example, the first two items aren't rendered on the first paint, as the range is something like 3:28. If you scroll up, rxFor creates the new views (+ attaching them as children to the DOM). The layout is now unstable - new nodes were added. Next, the scroll strategy asks for the dimensions of the newly created nodes which triggers a forced reflow - the layout will be stabilized. Before the scroll strategy does set position: absolute, chrome already rendered the node as position: relative, increasing the size of the scroll viewport and pushing down other nodes.
That's how the scroll position gets weirdly out of sync.

In order to fix it, i've just enforded an absolute positioning for child nodes of the __runway.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐞 Bug Bug: Something isn't working </> Template @rx-angular/template related
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants