Qt Quick Window/Frame with Inner Shadow flickers while resizing

Question

When I resize a Qt Quick ApplicationWindow that contains a Frame with an InnerShadow, I see flickering and visual artifacts. The same is not true when I either do not replace the default border or if I use a simple rectangle for the Frame object.

I tested this on my laptop that runs a 64-bit Arch Linux. It has an Nvidia GTX 1060 Max Q graphics card and an integrated Intel graphics card. I ran the code both with and without bumblebee.

Any way to work around or eliminate this flickering? It is pretty bad. My code and some screen-grabs are as below

EDIT: I have tried setting AA_ShareOpenGLContexts and AA_UseOpenGLES (and its software/desktop variants) attributes with no luck.

UPDATE: I have created an issue here: https://bugreports.qt.io/browse/QTBUG-81519, but I am still hoping someone can devise a workaround.

test.qml

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.14

ApplicationWindow{
    id: main
    width: 2*screen.width/3
    height: 2*screen.height/3
    title: "Test ApplicationWindow"  
    color: activeColorPalette.window 
    visible:true
    SystemPalette {
        id: activeColorPalette
        colorGroup: SystemPalette.Active
    }    
    Frame{
        anchors.fill: parent 
        anchors.margins: 10
        background: Item{
            id: root
            anchors.fill: parent
            Rectangle{
                anchors.fill: parent
                anchors.margins: 1
                radius: 16
                color: activeColorPalette.window
            }
            InnerShadow {
                anchors.fill: root
                horizontalOffset: 0
                verticalOffset: 0
                source: root
                radius: 16
                color: activeColorPalette.shadow
                spread: 0.6        
                samples: 32        
                cached: true
                fast:true
            }
        }
    }
}

Window without flickering or artifacts

Window with flickering/visual artifacts while resizing

Shivanand Shivanand · Accepted Answer · 2020-01-21T10:34:09

I found a workaround to eliminate the visual artifacts during resizing.

In my problem code, the InnerShadow used an Item QML type as the source, which is transparent by default and contained a grey Rectangle that I added within it. The visual distinction between the transparent source Item and the smaller child Rectangle inside it is what the InnerShadow uses to compute the shadow gradient within. The end result was a decorative shadow border. However, resizing the application resulted in ugly visual artifacts that would sometimes stay. Note: Changing the outer Item into a transparent Rectangle had no discernible effect.

But when I encapsulated the grey innermost rectangle into another transparent component like

Item {transparent Rectangle {grey inner Rectangle} }

or like

Rectangle{transparent Rectangle{grey inner Rectangle}}

in addition to setting the middle transparent Rectangle as the source for the InnerShadow, the visual artifacts are eliminated. Below is the working code for test_workaround.qml that you can compare to the test.qml above.

test_workaround.qml

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.14

ApplicationWindow{
    id: main
    width: 2*screen.width/3
    height: 2*screen.height/3
    title: "Test ApplicationWindow"  
    color: activeColorPalette.window 
    visible:true
    SystemPalette {
        id: activeColorPalette
        colorGroup: SystemPalette.Active
    }    
    Frame{
        anchors.fill: parent 
        anchors.margins: 10
        background: Item{
            id: root
            anchors.fill: parent
            Rectangle{
                 id: middleRect
                 anchors.fill: parent
                 color: "transparent"           
                Rectangle{
                    id: innerRect
                    anchors.fill: parent
                    anchors.margins: 1
                    radius: 16
                    color: activeColorPalette.window
                }
            }
            InnerShadow {
                anchors.fill: root
                horizontalOffset: 0
                verticalOffset: 0
                source: middleRect
                radius: 16
                color: activeColorPalette.shadow
                spread: 0.6        
                samples: 32        
                cached: true
                fast:true
                smooth:true
            }  
        } 
    }
}

Qt Quick Window/Frame with Inner Shadow flickers while resizing

1 Answers