Border changes width depending on rectangle width - qt

Question

I have a rounded rectangle in QML code and I noticed strange behavior of rectangle's border, when I resize the rectangle its border appears to be flickering a little and if I look closely I can see that its border seems to be changing its width from 1 to 2 and back or something like that, while in code it definitely set to 1 and doesn't depend on anything else. Also rectangle corners seem to be a little bit wider than border at straight sections. I tried to take screenshots of such rectangles but on the screenshots rectangles looks alright so I suppose it may be some rendering issue? It definitely noticeable in the app. On screenshots you can see that the second rectangle has its borders a little bit blurry, thats when the border appears to be wider than normal.
Is this a known problem and are there any settings in Qt I need to change to get consistent border width on my elements?
I'm using Qt 5.15, QML, C++. I could reproduce this behavior on Windows 10 on two different 1440p monitors.
Edit:
Since my main project is pretty big I will provide example project where I was able to reproduce the issue:
main.cpp
#include <QGuiApplication>
#include <QSurfaceFormat>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
#if defined(Q_OS_WIN)
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
}
main.qml:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle
{
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
width: parent.width / 3
height: parent.height / 3
color: "#F8F8F8"
radius: 8
border
{
color: "red"
width: 1
}
Text
{
id: valueField
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.pointSize: 10
text: "100"
color: "black"
}
}
}
The problem is reproducable when width and height of rectangle are bound to width and height of window, if I set them to one specific value - no such issue is present.

Answer 1

I found that if I do height: Math.round(parent.height / 3) instead of simple height: parent.height / 3, then the issue is gone. As per the comment from #DFaller :
I believe you are correct that this is the solution - QML accepts floats for size but seems to render only in integers, which can causes rounding issues where borders show as either 0 or 2 pixels instead of 1. Rounding as you did has fixed this issue for me in the past.
So posting this as the answer for now.