QtQuickView window is flickering on resize

atomsky

When I resize a Qt Quick window, the window and its contents flicker. The QML code and a demo video are shared below. I am running the Qt Quick app on Wayland.

Objective: I want to build a panel that can show images/icons/tooltips outside its initial area. On mouse hover, the panel area will be extended to allow such things. If there's a better way to achieve this on Qt, please let me know.

import QtQuick
import QtQuick.Controls

Rectangle {
    id: hack
    width: 30
    height: 600
    //color: "#00000000"
    color: "#000000"

    Rectangle {
        x: hack.width-30
        id: rect
        width: 30
        height: 600
        visible: true
        color: "teal"

        Button {
            text: "ok"
            width: 30
            height: 30
            anchors.verticalCenter: parent.verticalCenter

            ToolTip.visible: hovered
            ToolTip.delay: 500
            ToolTip.text: qsTr("This is what you see")

            MouseArea {
                id: mousearea
                anchors.fill: parent
                hoverEnabled: true
            }

            states: State {
                name: "extend"; when: mousearea.containsMouse === true
                PropertyChanges {
                    hack {
                        width: 300
                    }
                }
            }

            transitions: Transition {
                from: ""; to: "extend"; reversible: true

                NumberAnimation {
                    property: "width"
                    duration: 500
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }
}

Video of flickering