Glitch when resizing frameless QML window

Question

I've created a project with the following QML:

main.qml

import QtQuick
import QtQuick.Controls

ApplicationWindow {
  id: root
  visible: true
  width: 800; height: 600
  flags: Qt.FramelessWindowHint


  Item {
    id: myitem //Dummy item as mapToItem requires Item
    anchors.fill: parent

      Rectangle {
        width: 10
        height: 10
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        color: "red"

        MouseArea {
          anchors.fill: parent
          onPositionChanged: {
          root.width += mapToItem(myitem,mouseX,mouseY).x-myitem.width
          root.height += mapToItem(myitem,mouseX,mouseY).y-myitem.height
        }
      }
    }
  }
}

I've followed a suggestion found in this post in order to resize a frameless QML window.

If I run the application, you can see that there's a glitch when I try to resize the frameless qt window.

What I'm doing wrong and how can I fix it?

Answer 1

Because the root window is frameless, consider making it transparent as well, e.g.

ApplicationWindow {
    id: root
    visible: true
    x: 0
    y: 0
    width: Screen.width
    height: Screen.height
    flags: Qt.FramelessWindowHint
    color: "transparent"

    Rectangle {
        id: fakewin
        x: Math.min(a.x, b.x)
        y: Math.min(a.y, b.y)
        width: Math.abs(a.x - b.x) + 10
        height: Math.abs(a.y - b.y) + 10
    }

    Rectangle {
        id: a
        x: 100
        y: 100
        width: 10
        height: 10
        color: "red"
        DragHandler { }
    }

    Rectangle {
        id: b
        x: 300
        y: 300
        width: 10
        height: 10
        color: "green"
        DragHandler { }
    }
}

That way, you only need to resize the fakewin and not the root when dragging your red grip. This, should, hopefully, workaround the artifacts you're seeing.