Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-81250

WebEngineView QML Type doesn't clear transparent regions when using QSGRendererInterface::Software

    XMLWordPrintable

Details

    • Bug
    • Resolution: Done
    • P2: Important
    • 5.15.0 Beta4
    • 5.14.0, 5.15.0 Beta1
    • WebEngine
    • None
    • Ubutnu 18.04
    • Linux/X11
    • cee8776777e72f2820f04f1df00e2aeebbf9af49 (qt/qtwebengine/5.15)

    Description

      When displaying a web page containing an animated SVG in a WebEngineView with a transparent background, in a QQuickView, there appears to be ghosting when using the QSGRendererInterface::Software scene graph backend. Essentially during the animation, regions that previously weren't transparent, and are now transparent, aren't cleared with the background colour.

      The OpenGL renderer however, appears to work appropriately.

      Here is a minimal example illustrating the issue. It shows two rotating squares, that transition from blue to red repeatedly. The rotating square on the left is an animated SVG rendered by the WebEngineView, and the square on the right is an animated QML Rectangle.

      The square on the right (the QML Rectangle) always behaves correctly regardless of whether software or OpenGL is used as the scene graph backend. The square on the left continuously paints on top of itself when the software renderer is used, otherwise, when OpenGL is used, it appears just like the square on the right.

       

      main.cpp
      #include <QApplication>
      #include <QQmlComponent>
      #include <QtWebEngine>
      
      int main(int argc, char *argv[])
      {
          QtWebEngine::initialize();    
          QApplication app(argc, argv);    
      
          if ((argc > 1) && (argv[1][0] != '0'))
          {
              QQuickWindow::setSceneGraphBackend(QSGRendererInterface::Software);
          }    
      
          QQuickView view;    
          view.setColor(QColor(Qt::transparent));
          view.setClearBeforeRendering(true);
          view.setSource(QUrl::fromLocalFile("test.qml"));
          view.show();    
      
          QQuickItem* rootItem = view.rootObject();
          QObject *webEngineView = rootItem->findChild<QObject *>("web");    
         
          QString html = R"(
          <body>
              <svg width="200" height="200">
                <rect x="50" y="50" width="100" height="100" style="fill: #0000ff;">
                  <animateTransform attributeType="XML"
                    attributeName="transform" type="rotate"
                    from="0 100 100" to="360 100 100"
                    dur="3s"
                    repeatCount="indefinite"
                    />
                  <animate attributeName="fill" values="blue;red"
                    dur="3s"
                    repeatCount="indefinite"
                    />
                </circle>
              </svg>
          </body>
          )";    
         
          QMetaObject::invokeMethod(webEngineView, "loadHtml", Q_ARG(QString, html), Q_ARG(QUrl, QUrl("http://localhost")));    
      
          return app.exec();
      }
      
      test.qml
      import QtQuick 2.0
      import QtQuick.Window 2.0
      import QtWebEngine 1.10
      
      Rectangle {
          id: root
          width: 400
          height: 250
          visible: true
          color: "white"
      
          WebEngineView {
              id: web
              anchors.fill: parent
              anchors.margins: 0
              settings.showScrollBars: false
              backgroundColor: "transparent"
              objectName: "web"
          }
      
          Rectangle {
              x: 250
              y: 50
              width: 100;
              height: 100;
              NumberAnimation on rotation {
                  loops: Animation.Infinite
                  from: 0
                  to: 360
                  duration: 3000
              }
              ColorAnimation on color {
                  loops: Animation.Infinite
                  from: "blue"
                  to: "red"
                  duration: 3000
              }
          }
      }
      

      Expected result (OpenGL):

      Software rendering result:

      Attachments

        Activity

          People

            juri.valdmann Jüri Valdmann (Inactive)
            georgewilliams George Williams
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: