Asymmetric graphicsLayer scale values with a shadow causes wasm crash

[mdigman]

Describe the bug Applying asymmetric graphicsLayer values (scaleX != scaleY) and then applying a shadow causes a divide by 0 wasm error but only in js exports.

Affected platforms Select one of the platforms below:

• Web (K/JS) - Canvas based API

Versions

• Kotlin version*: 1.8.20
• Compose Multiplatform version*: 1.4.0
• Browser: Chrome Version 112.0.5615.121 (Official Build) (x86_64)

To Reproduce Run the following Composable and check the browser console for the error:

@Composable
fun AsymmetricScaleTester() {
    Box(
        Modifier.size(100.dp)
            .graphicsLayer(scaleX = 0.7f, scaleY = 1f)
            .shadow(elevation = 2.dp)
    )
}

The first few lines of the error reads:

caught RuntimeError: divide by zero
    at skiko.wasm:0x28ab10
    at skiko.wasm:0x295b57
    at skiko.wasm:0x2e7fa7
    at skiko.wasm:0x30bcb2
    at skiko.wasm:0x31235f
    at skiko.wasm:0x32239a
    at skiko.wasm:0x29c8cb
    at skiko.wasm:0x28ccbe
    at skiko.wasm:0x28c4ed
    at skiko.wasm:0x28d0db

Expected behavior It should render and not crash as it does on other platforms.

Screenshots Error stacktrace:

Additional context This may be related to this bug but the error is divide by zero instead of modulo zero: https://github.com/JetBrains/compose-multiplatform/issues/3072

[alexzhirkevich]

Shadow elevation is completely broken in wasm :) #3013

[eymar]

Fixed in 1.4.1 (by using new skiko 0.7.63)

[c5inco]

Not sure it's related, but there seems to be issues with rotate which also is done in the graphicsLayer with rotationZ.

This code causes a similar crash:

@Composable
fun SimpleView() {
    Box(
        modifier = Modifier
            .size(width = 360.dp, height = 360.dp)
            .rotate(-60.0f)
            .padding(42.dp)
            .shadow(elevation = 16.dp, shape = RoundedCornerShape(size = 32.dp))
            .background(color = Color.Yellow, shape = RoundedCornerShape(size = 32.dp))
    ) { }
}