DrawModifierNode is not synced with LazyColumn scroll position

[artsmvch]

Describe the bug
Drawing done in drawBehind/drawWithCache/drawWithContent is not synced with the LazyColumn scroll position.
Please see the video attached: when scrolling, the position of the drawn icons (circles) is unstable relative to the items in the LazyColumn.
The icons are drawn using the drawBehind modifier.

Affected platforms

• iOS

Versions

• Kotlin version*: 1.9.20
• Compose Multiplatform version*: 1.6.10-beta03
• OS version(s)* (required for Desktop and iOS issues): iOS 17.4.1
• OS architecture (x86 or arm64): arm64
• Device (model or simulator for iOS issues): iPhone 12

To Reproduce
Here is a code snippet to reproduce.
Steps and/or the code snippet to reproduce the behavior:

1. Scroll the list
2. See the bug: the icon drawing is not synced with the LazyColumn scroll position.

Expected behavior
Drawing done in drawBehind/drawWithCache/drawWithContent is synced with the LazyColumn scroll position.

Video

IMG_0006.MP4

Additional context
Works fine on Android.

[igordmn]

when scrolling, the position of the drawn icons (circles) is unstable relative to the items in the LazyColumn.

Looks like it's only on the top/bottom elements during overscrolling?

Screen.Recording.2024-05-03.at.16.32.01.mov

@elijah-semyonov, listState.layoutInfo.visibleItemsInfo doesn't take into account the overscroll effect.

[artsmvch]

@igordmn No, the problem with the overscroll effect is a separate issue that also doesn't work on Android (there is a feature request that might help fix this).

This issue is about drawings done in DrawModifierNode not being synced with the scroll position of LazyColumn when scrolled in any position (with the overscroll effect disabled).

I also noticed that this actually works fine on the simulator - so there is no such problem in your video.
I can only reproduce the bug on a real device (iPhone 12 iOS 17.4.1).

[igordmn]

I can only reproduce the bug on a real device

Could you post a video with scrolling in the middle? In the video you posted it is difficult to distinguish the desync because of overscoll and the desync because of other reasons

[artsmvch]

Sure, I updated the code to make the problem more visible.

And here is the video:

IMG_0012.MP4

Set the speed to 0.5 to see that the drawn elements (yellow boxes) are not aligned to the list items when scrolling.

[elijah-semyonov]

@elijah-semyonov, listState.layoutInfo.visibleItemsInfo doesn't take into account the overscroll effect.

@igordmn
That makes sense. Overscroll effect on iOS is based on applying Modifier.offset to the scroll content and tracks its own state, it doesn't know anything about the implementation of the particular scroll it's integrated with (whether it's a TextField scroll, .scrollable or LazyList.

Native iOS works with negative (or above the max value) scrolls. Such values are breaking common logic invariants, so supporting it in the same way as native iOS does it would be extremely intrusive.

The lag looks interesting though, did we include main-loop sequence fix in beta03?

[igordmn]

The lag looks interesting though, did we include JetBrains/compose-multiplatform-core#1260 in beta03?

Yes, it is included

[m-sasha]

Possibly fixed by JetBrains/compose-multiplatform-core#1356; worth trying.

[elijah-semyonov]

@m-sasha it's indeed fixed by that fix.

RPReplay_Final1715848901.MP4

[m-sasha]

Could you check the one with the yellow squares too? It's much more visible there.

[elijah-semyonov]

Sure! It's not present there either:

RPReplay_Final1715932651.MP4

[artsmvch]

Nice, what version will the fix come in?

[m-sasha]

It will definitely be in 1.7, possibly earlier in 1.6.11. You can also see it in our dev builds, which we release every few days.