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

Skip to content

Autosize virtual scroll viewport height being wrong when working with Ionic components #1812

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
Closed
FelixMuehling opened this issue Nov 26, 2024 · 3 comments · Fixed by #1858
Closed

Autosize virtual scroll viewport height being wrong when working with Ionic components #1812

FelixMuehling opened this issue Nov 26, 2024 · 3 comments · Fixed by #1858

Comments

@FelixMuehling
Copy link
Contributor

Description

We are using your autosize virtual scroll implementation together with Ionic and were facing some issues.

The initial calculated height of the virtual scroll viewport is wrong when working with Ionic components.
(I guess thats not an Ionic exclusive problem, but rather a problem with web components?)

The View (there should be 5 items):

image

DevTools:

image

It also seems to make a difference whether an custom scroll container with rxVirtualScrollElement is used or not.
When removing the custom scroll container, the issue doesn't reproduce anymore.

Steps to Reproduce the Issue

Look at this stackblitz.

Click the Change detection button to fix the view by triggering change detection manually. That does only work
when reading the signal in our template instead of passing it.

When removing the rxVirtualScrollElement container, it doesn't reproduce anymore.

Environment

Angular: 18.2.12
rx-angular/template: 18.0.3
Browser: Chrome 131.0.6778.85
@CelloFloss
Copy link

CelloFloss commented Dec 21, 2024 •
edited
Loading

Similar issue using Ionic and rxVirtualScrollElement with a tabbed layout. The rx-virtual-scroll-viewport height changes to different values whenever switching tabs.

stackblitz

It seems the issue I'm having may be related to 1778

@hoebbelsB
Copy link
Member

hoebbelsB commented Dec 22, 2024 •
edited
Loading

hey @CelloFloss & @FelixMuehling this bug is not related to webcomponents, but how ionic treats pages. It doesn't destroy components, but sets them to display: none.

By overriding the ion-page-hidden class to use content-visibility: hidden instead of display: none, the bug is gone.

image

I've tested it with this stackblitz by @CelloFloss .

I still guess it's the resize observer emitting falsy values because of the display none. What do you think about an option to disable / enable the resizeobserver on the fly? I guess ionic provides hooks for state transition events. So before a page gets detached, disable the resizeobserver and enable it again when the page gets re attached.

cc @edbzn & @malua I guess this is also related to your issues with ionic

@FelixMuehling
Copy link
Contributor Author

I guess enabling/disabling the resize observer could be a workaround to fix such issues with ionic pages. We currently have superclasses for our ionic pages that trigger change detection manually to fix those issues ( 🙃 ).

But the problem I described in this issue is not related to that, no? I have no ionic page here. When I replace the ion-item element with just a <p>, the issue is gone:

image

Somehow the height is calculated wrong when working with ionic components there

@FelixMuehling FelixMuehling mentioned this issue Feb 10, 2025
Merged
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

Successfully merging a pull request may close this issue.

fix(template): using tombstoneSize for non-cached items with 0 height FelixMuehling/rx-angular
3 participants
@hoebbelsB @FelixMuehling @CelloFloss