Qt Quick Window/Frame with Inner Shadow flickers while resizing - linux

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

Answer 1

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
}
}
}
}