You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
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.
The text was updated successfully, but these errors were encountered: