panpf
SVG Tint/Color Filter Bug in Lazy List
Describe the bug
When scrolling lists that render images with sketch-compose (in Compose Multiplatform), the provided ColorFilter is not consistently applied.
Versions
- sketch version*: 4.4.0-alpha01
- Kotlin version*: 2.1.21
- Compose version(s)*: 1.9.0-alpha02 (org.jetbrains.compose-plugin)
- Running Devices (*) :
- OnePlus 7T Pro, Android
Sample code Simpliefied Example:
LazyRow(Modifier.fillMaxWidth()) {
items(urls){ url ->
AsyncImage(
request = ComposableImageRequest(url) {
crossfade(durationMillis = 10, alwaysUse = true)
resizeOnDraw(false)
if (!url.contains(".svg")) {
precision(Precision.EXACTLY)
}
components {
supportSvg()
}
}, contentDescription = "Test",
modifier = Modifier.size(32.dp),
contentScale = ContentScale.Fit,
alignment = Alignment.Center,
colorFilter = ColorFilter.tint(Color.White),
)
}
}
Reproduction steps
- Open a screen rendering a LazyRow with ~20 SVG images loaded from the network.
- Scroll slowly left/right: occasionally, a row item shows the SVG in original colors (no tint).
- Scroll quickly: the tint is not applied for most or all visible SVGs.
- After minor scroll/jitter, some items may appear with tint again.
Expected behavior
The provided ColorFilter should be applied consistently to every item, independent of scroll speed or list orientation.
Screenshots
https://github.com/user-attachments/assets/fb2db1fc-6f47-4048-88ae-58f045ba10f6
Important Update:
The issue is tied to crossfade. With crossfade disabled (e.g., crossfade(false)), the tint is applied consistently and everything works as expected. I’m fine proceeding without crossfade, so this is resolved on my end. Leaving this note in case the maintainers want to investigate the crossfade interaction further.
