Applying mask to image breaks alignment - qt

Question

Whenever I apply a mask to an image to make it circular, the alignment of UI elements breaks. The image is offset to the right by some number of pixels.
// main.qml
import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.1
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Example")
Page1Form {
}
}
// Page1Form.qml
import QtQuick 2.8
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.1
Item {
RowLayout {
id: playerRowLayout
Layout.alignment: Qt.AlignLeft
Layout.fillWidth: true
RoundedImage {
id: displayImage
width: 50
height: 50
Layout.preferredWidth: 50
Layout.preferredHeight: 50
source: "Images/DisplayPicture.jpeg"
sourceSize.width: width
sourceSize.height: height
}
Text {
id: playerText
text: qsTr("Hameer Abbasi (Pro)")
font.family: "Source Sans Pro"
font.pixelSize: 12
}
}
}
// RoundedImage.qml
import QtQuick 2.8
import QtGraphicalEffects 1.0
Image {
id: img
property bool rounded: true
property bool adapt: true
layer.enabled: rounded
layer.effect: OpacityMask {
maskSource: Rectangle {
anchors.centerIn: parent
width: adapt ? img.width : Math.min(img.width, img.height)
height: adapt ? img.height : Math.min(img.width, img.height)
radius: Math.min(width, height)*0.5
}
}
}
When I change RoundedImage to Image, the misalignment disappears, like so:
Also, when I add anchors.fill: img or anchors.centerIn: img to the OpacityMask, I get the following result (as you can see, the misalignment has not disappeared but just moved):
The only thing that does seem to work is setting the anchors.right: displayImage.left on the textbox, but that somehow seems like a hack and I feel like I'm not doing something right somehow. Can someone help me figure out where the issue is and what the "proper" way to fix this would be?

Answer 1

I can't explain you why this thing is happening. To me it looks like a bug.
Seemingly there is an easy workaround: Don't have the Image directly inside the Layout. Change the RoundedImage.qml to this:
// RoundedImage.qml
import QtQuick 2.7
import QtGraphicalEffects 1.0
Item {
id: img
property bool rounded: true
property bool adapt: true
property alias source: image.source
property alias sourceSize: image.sourceSize
Image {
id: image
width: img.width
height: img.height
layer.enabled: rounded
layer.effect: OpacityMask {
maskSource: Rectangle {
width: adapt ? img.width : Math.min(img.width, img.height)
height: adapt ? img.height : Math.min(img.width, img.height)
radius: Math.min(width, height)*0.5
}
}
}
}
and the strange behavior is gone.