compose-multiplatform: Performance issues(missing frames) on LazyColum

Describe the problem

Bad performance on LazyColum( There is no problem with using Colum ) and the content of the screen does not move with the hand (latency)

Have you noticed any patterns or specific circumstances under which the problem occurs? In both implementations, I used the Instruments tool Allocation and Animation Hitches and Time Profiler. I also tried grab the metal profile. It’s all subtle levels. It doesn’t seem to be a gpu performance problem. I feel like it’s still a cpu problem. The data performance of the two methods is basically the same, but the actual touch is obviously felt with LazyColum jank.

Affected platforms Select one of the platforms below:

Versions

Kotlin version: 1.9.20
Compose Multiplatform version: 1.6.0
OS version(s) (required for Desktop and iOS issues): iOS 17.3.1
OS architecture (x86 or arm64): arm64
Device: iPhone 13

Sample code

// kotlin
fun getDemoViewController(isIdle: (Boolean) -> Unit): UIViewController {
    return ComposeUIViewController(
        content = {
            LazyColumn(userScrollEnabled = true, modifier = Modifier.fillMaxSize()) {
                items((0..100).toList(), { it }) { index ->
                    Text("Item $index", style = TextStyle(fontSize = 30.sp), modifier = Modifier.height(150.dp))
                }
            }

            // no problem using Column
//            Column(modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState())) {
//                (0..100).forEach { index ->
//                    Text(
//                        "Item $index",
//                        style = TextStyle(fontSize = 30.sp),
//                        modifier = Modifier.height(150.dp)
//                    )
//                }
//            }

        }
    )
}

//swift
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    window = UIWindow(frame: UIScreen.main.bounds)
    window?.makeKeyAndVisible()
    window?.rootViewController = UINavigationController(rootViewController: Compose_view_iosKt.getDemoViewController { _ in})
    window?.backgroundColor = .white
    return true
  }
}

Video https://drive.google.com/file/d/1pekBo5D5OI-rkMHCb7byMYbAnsdXcz_c/view?usp=share_link

Profiling data https://drive.google.com/drive/folders/1yndeXWYojDAoYxiZoraq-HVajq0HbbcX?usp=share_link

About this issue

Original URL
State: open
Created 4 months ago
Reactions: 2
Comments: 27 (13 by maintainers)

Most upvoted comments

@m-sasha before your PR will be reviewed and merged, how can I patch the dependency for my project ?

kiethayqua on Apr 11, 2024

@m-sasha Thanks for reply

the LaunchedEffect(Unit){...} is what is driving the scrolling.

Yeah but we can also scroll it mannually. I did some further tests, the scrolling experience with LazyColumn is still far from Column when scrolling on a real iOS device, it happened both on iPhoneSE3 and iPhone13 while run perfectly on Android. You can check the iOS screen recording below:

https://github.com/JetBrains/compose-multiplatform/assets/40794760/9129160b-c190-4231-ba92-56b180a4c21e

reproducer code:

@Composable
fun TestLazyColumn() {
    Box(modifier = Modifier.fillMaxSize()) {
        Row {
            Column(
                modifier = Modifier
                    .fillMaxHeight()
                    .weight(1f)
                    .verticalScroll(rememberScrollState())
            ) {
                (0..100).forEach { index ->
                    Text(
                        "Column item $index",
                        style = TextStyle(fontSize = 30.sp),
                        modifier = Modifier.height(150.dp).fillMaxWidth().border(
                            width = 1.dp,
                            color = Color.Black
                        )
                    )
                }
            }


            LazyColumn(
                state = rememberLazyListState(),
                modifier = Modifier.fillMaxHeight().weight(1f)
            ) {
                items(100) { index ->
                    Text(
                        "LazyColumn item $index",
                        style = TextStyle(fontSize = 30.sp),
                        modifier = Modifier.height(150.dp).fillMaxWidth().border(
                            width = 1.dp,
                            color = Color.Black
                        )
                    )
                }
            }
        }
    }
}

tipsypotato on Apr 19, 2024

@tipsypotato Yeah, it’s a debug build. Release build is much better (though can also have occasional stutters due to GC). Can you check if you have this behavior on release builds?

@elijah-semyonov It still happens with release build on iOS, the stutters are frequent and subtle, but still very noticeable compared to Column. Our project uses lots of LazyColumn, so it would be very appreciated if you could give it a further look!

tipsypotato on Apr 23, 2024

@jnelle Thanks, I’ll have a look!

elijah-semyonov on Apr 23, 2024

I think he means the list seems to scroll to a random far position sometimes. But this is a different issue, possibly a bug in the user code. Please post a reproducer in a new issue.

m-sasha on Apr 23, 2024

That would be difficult. Just wait for the first dev build after my PR is merged.

m-sasha on Apr 11, 2024