Changing CSS to achieve a transparent background breaks rendering

Hecklezz

I am trying to write a very simple QWebEngineView application that simply loads a certain website and changes its background to be transparent so it can be overlayed on-top.

However, I am running into an issue where it seems no matter what I do, once the CSS gets changed, the page rendering breaks about 50% of the time, and continues to render everything and never clearing, so things that were previously drawn stay drawn and gets progressively worse. I have to keep reopening the application until it wants to work.

I have tested this with both MSVC Qt6.9.1 written in C++, and pyQt 6.9.1 in python, both exhibit the same problem. (pyQt5 doesn't work for a different reason, because the Javascript of the page I need it to work on, doesn't work in pyQt5)

Here is a video recording showing the bug-
https://i.imgur.com/eNyYwyM.mp4
Example of when it works correctly-
https://i.imgur.com/DVbCcyP.mp4

If I don't inject the CSS, the web page works perfectly, renders correctly, but of course still isn't transparent.

If I inject the CSS at DocumentCreation, it is too early for the site I am using and the CSS just doesn't apply at all.

Python example-

import sys
from PyQt6.QtWidgets import QApplication
from PyQt6.QtWebEngineCore import QWebEngineScript
from PyQt6.QtWebEngineWidgets import QWebEngineView
from PyQt6.QtCore import QUrl, Qt
from PyQt6.QtGui import QColor

def main():
    app = QApplication(sys.argv)
    view = QWebEngineView()
    
    view.setWindowFlags(Qt.WindowType.FramelessWindowHint | Qt.WindowType.WindowStaysOnTopHint)
    view.setAttribute(Qt.WidgetAttribute.WA_TranslucentBackground)
    view.setStyleSheet("background:transparent;")
    
    view.page().setBackgroundColor(QColor(Qt.GlobalColor.transparent))
    view.settings().setAttribute(view.settings().WebAttribute.ShowScrollBars, False)

    transparent_css = """
        body, html, div {
        background-color: transparent !important;
        background: none !important;
        }
    """

    transparent_js = (
        "var style = document.createElement('style');"
        f"style.innerHTML = `{transparent_css}`;"
        "document.head.appendChild(style);"
    )
        
    style_script = QWebEngineScript()
    style_script.setInjectionPoint(QWebEngineScript.InjectionPoint.DocumentReady)
    style_script.setWorldId(QWebEngineScript.ScriptWorldId.MainWorld)
    style_script.setSourceCode(transparent_js)
    view.page().scripts().insert(style_script)

    view.setGeometry(100, 200, 400, 600)
    view.setUrl(QUrl("https://www.google.com"))
    view.show()
    
    sys.exit(app.exec())

if __name__ == "__main__":
    main()

C++ Example-

#include <QApplication>
#include <QWebEngineView>
#include <QWebEngineScript>
#include <QWebEngineScriptCollection>
#include <QWebEngineSettings>
#include <QWebEngineProfile>

int main(int argc, char* argv[]) {
    QApplication app(argc, argv);
    QWebEngineView view;

    view.setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint);
    view.setAttribute(Qt::WA_TranslucentBackground);
    view.setStyleSheet("background:transparent;");

    view.page()->setBackgroundColor(Qt::transparent);
    view.settings()->setAttribute(QWebEngineSettings::ShowScrollBars, false);

    QString transparentCSS = R"(
        body, html, div {
            background-color: transparent !important;
            background: none !important;
        }
    )";

    QString transparentJS =
        "var style = document.createElement('style');"
        "style.innerHTML = `" + transparentCSS + "`;"
        "document.head.appendChild(style);";

    QWebEngineScript styleScript;
    styleScript.setInjectionPoint(QWebEngineScript::DocumentReady);
    styleScript.setWorldId(QWebEngineScript::MainWorld);
    styleScript.setSourceCode(transparentJS);
    view.page()->scripts().insert(styleScript);

    view.setGeometry(100, 200, 400, 600);
    view.setUrl(QUrl("https://www.google.com"));
    view.show();

    return app.exec();
}

Platform: Windows 10 only, doesn't need to work for MacOS or Linux

Edit: I tested in a fresh Windows 11 VM as well, and the exact same thing happens, random starts of the application just break the rendering. So something is wrong somewhere with how Qt is rendering, or I'm doing something wrong...

Edit2: If you are having troubles reproducing the bug, I found that instead of injecting the CSS for it to be set at DocumentReady, you can instead connect to the page, then use a QTimer SingleShot with a 1second wait, then run the JS then and it breaks the rendering 100% of the time.
For example, comment out the inserting styleScript part of the code and insert (or pythons equiv)-

//view.page()->scripts().insert(styleScript);
view.setGeometry(100, 200, 400, 600);
view.setUrl(QUrl("https://www.google.com"));

QObject::connect(view.page(), &QWebEnginePage::loadFinished, [&](bool ok) {
    if (ok) {
        QTimer::singleShot(1000, [&]() {
            view.page()->runJavaScript(transparentJS);
        });
    }
});

Hecklezz

Just for sanity sake, I tested with pyQt5, even though that has it's own different issue with JS that I have, but the rendering bug does NOT reproduce on it after numerous tries. I am going to try older versions of Qt6 to see if perhaps one of the versions broke this, or if its just Qt6 in general broke it, and only Qt5 works...

Hecklezz

The bug still occurs on Qt6.5.3, which is the oldest I can go back to with the Online Installer for Qt6... What changed between Qt5 and Qt6 that could be causing this? I have two versions setup with identical code, minus just the imports being changed, and Qt5 works every single time, and Qt6 doesn't...

Hecklezz

I have pinpointed the bug relating to Qt version 6.3.0 and onwards. Using Qt6.2.3 everything is working flawlessly every time, then as soon as I switched to Qt 6.3.0 (and any version after), it breaks again.
Should I open a bug report regarding this or is this already a known issue? Or is there something simple I'm missing that needs to be done since this version?

Edit: Seems to specifically be Qt WebEngine 6.3.0+ that has the bug, since testing with Qt 6.8.1 along with Qt WebEngine 6.2.3, the issue isn't happening. However, as soon as I go up to Qt 6.9.1 with WebEngine 6.2.3, a different issue occurs and both the original rendering bug is gone, but transparency don't work.

jsulm

@Hecklezz said in Changing CSS to achieve a transparent background breaks rendering:

Should I open a bug report regarding this or is this already a known issue?

You can check in Qt bug tracker https://bugreports.qt.io/browse/VSCODEEXT-204?jql=