compose-multiplatform icon indicating copy to clipboard operation
compose-multiplatform copied to clipboard

DrawModifierNode is not synced with LazyColumn scroll position

Open artsmvch opened this issue 10 months ago • 6 comments

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

https://github.com/JetBrains/compose-multiplatform/assets/61359788/6975dc56-026c-45de-8201-9b5c87455f7c

Additional context Works fine on Android.

artsmvch avatar Apr 30 '24 20:04 artsmvch

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?

https://github.com/JetBrains/compose-multiplatform/assets/5963351/0ddd4afe-8cad-4136-996c-ea7dd5dbc657

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

igordmn avatar May 03 '24 14:05 igordmn

@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).

artsmvch avatar May 04 '24 12:05 artsmvch

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

igordmn avatar May 06 '24 09:05 igordmn

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

And here is the video:

https://github.com/JetBrains/compose-multiplatform/assets/61359788/b292b5c4-89aa-49a4-b6b5-0c60a04c5e63

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

artsmvch avatar May 06 '24 10:05 artsmvch

@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?

elijah-semyonov avatar May 06 '24 11:05 elijah-semyonov

The lag looks interesting though, did we include https://github.com/JetBrains/compose-multiplatform-core/pull/1260 in beta03?

Yes, it is included

igordmn avatar May 06 '24 12:05 igordmn

Possibly fixed by https://github.com/JetBrains/compose-multiplatform-core/pull/1356; worth trying.

m-sasha avatar May 14 '24 19:05 m-sasha

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

https://github.com/JetBrains/compose-multiplatform/assets/4167681/af9be465-8f11-4ea1-8aa8-3ab83994a669

elijah-semyonov avatar May 16 '24 08:05 elijah-semyonov

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

m-sasha avatar May 16 '24 08:05 m-sasha

Sure! It's not present there either:

https://github.com/JetBrains/compose-multiplatform/assets/4167681/3c522443-be25-473f-be39-32ecbda73d1f

elijah-semyonov avatar May 17 '24 08:05 elijah-semyonov

Nice, what version will the fix come in?

artsmvch avatar May 17 '24 08:05 artsmvch

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.

m-sasha avatar May 17 '24 08:05 m-sasha

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.

okushnikov avatar Aug 26 '24 13:08 okushnikov