Border changes width depending on rectangle width

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.

What does your QPainter::renderHints return? Try setting QPainter::Antialiasing if it's not set. But in any case, the graphics engine has to make some sort of compromise if the rectangle width or height is a fractional number of pixels. — TonyK
@TonyK Although the OP does not show any code, they do mention using QML, so it's unlikely that QPainter is being used. — JarMan
@JarMan @Amfasis I've updated the question with example code, none of the solutions helped. But I did find that if I do height: Math.round(parent.height / 3) instead of simple height: parent.height / 3, then the issue is gone. If this is the correct solution then I can post an answer for the issue. — monkeber
@monkeber 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. — fallerd

monkeber monkeber · Accepted Answer · 2020-12-29T10:42:29

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.

Border changes width depending on rectangle width

1 Answers