Window flashes with default background color when shown initially

[m-sasha]

On Mac OS X (haven't checked other platforms), the simplest application showing a window filled with some color will flash the default background color for a split second. This is unnoticeable with a light theme, but is very annoying with a dark theme.

window.flash.mp4

fun main() = singleWindowApplication(
    state = WindowState(
        width = 800.dp,
        height = 600.dp,
    )
) {
    Surface(
        color = Color.Black,
        modifier = Modifier.fillMaxSize()
    ){ }
}

This happens because JFrame sets its background in frameInit to UIManager.getColor("control").
Even setting

window.background = java.awt.Color(0, 0, 0)

inside the singleWindowApplication content doesn't help because it seems the window has drawn itself by the time it's called.

What does help is calling

UIManager.put("control", java.awt.Color(0, 0, 0))

before the call to singleWindowApplication.

[Thomas-Vos]

Running into the same issue, on macOS you can indeed fix it using the UIManager workaround. However, on Windows it is still an issue. I have not found a fix for Windows yet.

It appears that the window is shown before the Compose UI code, which seems unexpected to me. Maybe the window should be hidden until the first frame?

[igordmn]

In 1.1.0 we draw the first frame offscreen.

If the application has too long start after this change, we can measure the first frame, and move the heavy logic to background or to the next frames. We can measure the first frame with this snippet:

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.window.singleWindowApplication

private var time by mutableStateOf(System.nanoTime())
private var frame by mutableStateOf(0)

fun main() = singleWindowApplication {
    if (frame == 0) {
        frame++
    } else if (frame == 1) {
        val duration = ((System.nanoTime() - time) / 1E6).toLong()
        println("First frame millis: $duration")
    }
}

[m-sasha]

Looks like we have a regression here. This happens maybe 25% of the times the app is launched:

fun main() = application {
    val windowState = rememberWindowState(size = DpSize.Unspecified)
    Window(onCloseRequest = ::exitApplication,
        state = windowState,
    ) {
        Box(modifier = Modifier.background(Color.DarkGray).size(300.dp)) {
            Text("BOX", modifier = Modifier.align(Alignment.Center))
        }
    }
}

Screen.Recording.2023-02-07.at.9.30.20.mp4

Compose 1.3.0
Mac OS X 13.1
Kotlin 1.8.0

[m-sasha]

The problem seems to be in Skiko, not Compose.

[m-sasha]

Actually, maybe not. The reproducer I was trying to get in Skiko was doing it wrong.

[m-sasha]

Ok, the culprit here is size = DpSize.Unspecified. When using a specific size the background color doesn't flash.

I'm guessing that it happens because it requires an extra layout pass to determine the composition size, so the window is drawn before the composition is drawn at its final size.

[igordmn]

so the window is drawn before the composition is drawn at its final size.

To avoid flickering, we draw the first frame before isVisible = true.

When we don't specify the size, we call contentSize that do one additional implicit layout pass.

Maybe we do it after we draw the first frame. In this case, the fix will be to move calling contentSize before drawing the first frame.

[m-sasha]

I figured out why it's happening...

[m-sasha]

Note that the problem still exists when opening a Maximized window. Fixing that too clashes with being able to use an Unspecified "unmaximized" size for the window to go back to.