8000 Virtual Scroll loses scroll position on display: none · Issue #1778 · rx-angular/rx-angular · GitHub
[go: up one dir, main page]
Skip to content

Virtual Scroll loses scroll position on display: none #1778

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.

Sign up for GitHub

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

Jump to bottom
Open
malua opened this issue Sep 16, 2024 · 5 comments
Open

Virtual Scroll loses scroll position on display: none #1778

malua opened this issue Sep 16, 2024 · 5 comments

Comments

@malua
Copy link
malua commented Sep 16, 2024 •
edited
Loading

Description

In the Ionic Framework pages are hidden in the navigation stack by setting display: none;

When using the virtual scroll in a page which is then hidden by display: none; the scroll position changes when the page comes back into view and gets visible.

Steps to Reproduce the Issue

Create a virtual scroll list and toggle visibliity with display:none;

Environment

Happens on all browsers (Firefox, Safari, Chrome)

"@angular/animations": "18.1.2",
"@angular/cdk": "18.1.2",
"@angular/common": "18.1.2",
"@angular/core": "18.1.2",
"@angular/forms": "18.1.2",
"@angular/google-maps": "^18.1.2",
"@angular/platform-browser": "18.1.2",
"@angular/platform-browser-dynamic": "18.1.2",
"@angular/router": "18.1.2",
"@rx-angular/cdk": "^18.0.0",
"@rx-angular/template": "^18.0.0",

Please let me know if you know anything about that, and if it could be fixed? Thank you!
@malua
Copy link
Author
malua commented Sep 19, 2024

I think it only happens with autosize.
You can test it here by setting some parent of the rx-angular scroller to display none. It will jump a little down everytime you toggle display.

https://hoebbelsb.github.io/rxa-virtual-scroll/#/demos/autosize

@hoebbelsB
Copy link
Member

hey @malua it makes sense it happens with autosize. On display none all nodes become invisible and probably the resize observer will report their size as 0.

If you are not relying on the resizeObserver, just turn it off with the withResizeObserver flag on the autosize directive.

@malua
Copy link
Author
malua commented Oct 3, 2024

Thanks for the help, but unfortunately this does not fix the issue. Also with withResizeObserver set to false, the list is invisible after back navigation until scrolling is initiated again.
Would a sample repository with ionic help or is that something you won't be looking into?

@hoebbelsB
Copy link
Member

yes please, that would help a ton!

@malua
Copy link
Author
malua commented Oct 3, 2024

I have created a repo to reproduce the issue:
https://github.com/malua/ionic-rx-virtual-scroll/tree/main
I added a short README - please let me know if you have any questions!

And thank you!

@CelloFloss CelloFloss mentioned this issue Dec 22, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hoebbelsB @malua
0