Loading...

XML

Word

Printable

Details

Type: Bug
Resolution: Fixed
Priority: P2: Important
Fix Version/s: 6.5.6, 6.7, 6.8.0 FF
Affects Version/s: 6.5.3
Component/s: Quick: Controls 2, Quick: Graphical Effects
Labels:
None

Platform/s:

macOS, Windows
Commits:
ee975a136 (dev), 0666759d4 (6.7), 4bffe40db (tqtc/lts-6.5)

Description

Preconditions:
QML Popup control, background has MultiEffect with shadow.
There's a typical case when content is set by Loader, depending on some conditions, and Loader is not active until Popup is required (either "active: false" or "sourceComponent: null"). In such cases MultiEffect on background behaves very wrong. Please see attached screenshot and sample code.

Probably it may also reproduce when content changes size while popup is already opened.

Sample code:

import QtQuick
import QtQuick.Controls
import QtQuick.Effects

Window {
    width: 640
    height: 480
    visible: true
    color: "white"

    component Shadow : MultiEffect {
        shadowEnabled: true
        shadowColor: "black"
        shadowOpacity: 0.5
        shadowHorizontalOffset: 4
        shadowVerticalOffset: 5
    }

    component PopupFixedLayerEffect : Popup {
        id: control1

        background: Rectangle {
            radius: 10
            color: "white"

            layer.enabled: true
            layer.effect: Shadow {}
        }
    }

    component PopupDynamicLayerEffect : Popup {
        id: control2

        background: Rectangle {
            radius: 10
            color: "white"

            layer.enabled: control2.visible
            layer.effect: Shadow {}
        }
    }

    Rectangle { // Just for reference, how the shadow should look
        x: 20
        y: 20
        width: 200
        height: 200
        radius: 10

        layer.enabled: true
        layer.effect: Shadow {}
    }

    PopupFixedLayerEffect {
        id: p1;
        anchors.centerIn: parent

        Loader {
            active: p1.visible
            sourceComponent: Item {
                width: 200
                height: 200
            }
        }
    }
    PopupFixedLayerEffect {
        id: p2;
        anchors.centerIn: parent
        Loader {
            sourceComponent: Item {
                width: 200
                height: 200
            }
        }
    }
    PopupDynamicLayerEffect {
        id: p3
        anchors.centerIn: parent
        Loader {
            active: p3.visible
            sourceComponent: Item {
                width: 200
                height: 200
            }
        }
    }

    Column {
        spacing: 10
        anchors {
            right: parent.right
            top: parent.top
            rightMargin: 20
            topMargin: 20
        }

        Button {
            text: "Fixed layer.enabled, dynamic content"
            onClicked: p1.open()
        }
        Button {
            text: "Fixed layer.enabled, fixed content"
            onClicked: p2.open()
        }
        Button {
            text: "Dynamic layer.enabled,  dynamic content"
            onClicked: p3.open()
        }
    }
}