Qt: Semi-transparent window with Direct3D RHI on Windows

Question

I'm trying to create a semi-transparent application window with Qt6 on Windows. For that, I set the background color of the Window element to "#88000000". This works as expected in Linux, but results in a fully opaque window on Windows.

Digging deeper I found that this is caused by the rendering hardware interface. Since Qt 6.0, Qt by default uses OpenGL on Linux and Direct3D on Windows. If I manually force the RHI backend to be OpenGL on Windows as well then I do get the semi-transparent application window I want, however, it comes at the expense of the window flashing fully white before being fully set up. In fact, this is the exact same behavior I can observe with the old Qt5 version.

The white flashing when using the OpenGL backend on Windows seems to be a rather long-standing issue, I found this post on Stack Overflow from more than 11 years ago that asks for help with that. Unfortunately the white flash poses a problem for me as my application typically runs in fullscreen and a white flash is really bothersome and simply ugly.

Thus, my question: How can I achieve a semi-transparent window on Windows with Qt6 using Direct 3D as RHI backend? Or how can I avoid the white flashing when using OpenGL? Or does anybody have any other solutions to this?

Here is a very simple sample application exhibiting the issue:

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickView>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(u"qrc:/transparenttest/Main.qml"_qs);
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
        &app, [url](QObject *obj, const QUrl &objUrl) {
            if (!obj && url == objUrl)
                QCoreApplication::exit(-1);
        }, Qt::QueuedConnection);

    engine.load(url);

    return app.exec();
}

Main.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Window

Window {
    width: 640
    height: 480
    visible: true
    color: "#88000000"
}

Thanks in advance for any help on this!

Answer 1

As a workaround, how about starting with opacity: 0 and then transitioning to opacity: 1 in a PropertyAnimation? e.g.

import QtQuick
import QtQuick.Controls
import QtQuick.Window

Window {
    id: mw
    width: 640
    height: 480
    visible: true
    color: "#88000000"
    opacity: 0
    Component.onCompleted: PropertyAnimation {
        target: mw
        property: "opacity"
        to: 1
        duration: 100
    }
}