Strange border around popup when adding drop shadow with MultiEffect

Jimmy Harrington

Here's a minimal QML example that shows the problem I'm encountering:

import QtQuick
import QtQuick.Controls
import QtQuick.Effects

ApplicationWindow {
    width: 500
    height: 400
    visible: true

    color: "#E0E0E0"

    Button {
        text: "Open Popup"
        anchors.centerIn: parent
        onClicked: popup.open()
    }

    Popup {
        id: popup
        modal: true
        focus: true
        x: (parent.width - width) / 2
        y: (parent.height - height) / 2
        width: 200
        height: 150

        background: Rectangle {
            id: bg
            anchors.fill: parent.item
            color: "white"
            radius: 10
        }

        MultiEffect {
            anchors.fill: parent
            source: bg
            shadowEnabled: true
            shadowHorizontalOffset: 5
            shadowVerticalOffset: 5
        }

        Column {
            anchors.centerIn: parent
            spacing: 10

            Text { text: "This is a popup" }
            Button { text: "Close"; onClicked: popup.close() }
        }
    }
}

In the past, I have used RectangularGlow with great success. This item was much easier to work with. For example:

background: Rectangle {
        anchors.fill: parent
        border.width: 1
        border.color: "black"
        color: root.color

        RectangularGlow {
            z: -1
            anchors.fill: parent
            glowRadius: 12
            spread: 0.1
            color: Colors.black
            opacity: 0.6
        }
}

This works much better. However, unfortunately import Qt5Compat.GraphicalEffects is not available to me on this new project because I am using PyQt6, and Qt5Compat is not available with PyQt6, so I'm forced to resort to MultiEffect that has this strange border.

I'm not attached to using MultiEffect, so if there's a different way to achieve a dropshadow effect (that is compatible with PyQt6) I'd be happy to use that instead, but MultiEffect is the closest thing I've gotten to achieving this effect.