Transparent QGraphicsWebview over QGLWidget leads to super imposed images

Question

I have a transparent QGraphicsWebview inside a QGraphicsView with the following settings:

• The QGraphicsView is the high level widget, and is shown in full screen mode
• The graphics view uses a QGLWidget as its view port (to use opengl-es)
  • Alpha channel and double buffering are enabled in this QGLWidget
• Transparency is achieved by graphicsView->setStyleSheet("background:transparent")
• Following attributes are set for QGraphicsView and QGraphicsWebview
  • WA_TranslucentBackground = true
  • WA_NoSystemBackground = true
  • WA_OpaquePaintEvent = false
• The QPalette::Base and QPalette::Window brushes of webview and webview->page() are set to Qt::transparent

At the beginning, the transparency works fine. But as the screen get updated (when I scroll), it looks like the new bitmap is blended on top of the existing one to get a superimposed picture. After about 5-6 screen updates, this blending causes the colors to accumulate and form an opaque rectangle (with a corrupted image). Following images show first, second and final stages of the problem.

How do I tell qt/opengl to stop blending and just draw the new image to the frame buffer? I tried calling fillRect(boundRect(), Qt::transparent) from overridden Webview::paint and GraphicsView::paintEvent; but it didn't work except for making the updates slower.

I am new to Qt and OpenGl, so I might be missing some basic flags or settings.

Answer 1

It turns out the problem is graphicsView->setStyleSheet("background:transparent");. Who would have guessed?!

Yeah, the line that I thought made transparency work was actually causing troubles with transparency. The application works fine without that line (or if you change it to background:none)

In short, steps to get a transparent QGraphicsWebview using QGLWidget:

• Set the Base palettes of QGraphicsWebview, QWebpage and the outer QGraphicsView to Qt::transparent
• scene->setBackgroundBrush(QBrush(Qt::transparent));

You should also make sure that html body background is set to transparent values:

html, body {
  background-color: rgba(127, 127, 0, 0.5);
}