Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Display bug with WA_TranslucentBackground and AA_EnableHighDpiScaling



  • I'm building a window desktop app which is frameless and has transparent background. To achieve this, I set WA_TranslucentBackground and transparent FramelessWindowHint in mainWindow. And I also have to support different DPI, so I set AA_EnableHighDpiScaling in main function. It works well when windows system dpi set to 100% or 200%, but it will appear some 1px gap in child widget which is hovered when system dpi set to 125% ,150% , 175% .

    企业微信截图_16069992021980.png
    image above is normal state main window

    企业微信截图_16069992347541.png
    image above is bad rendered main window when child widget has beed hovered. You can see 1px transparent gap where arrow point to.

    This phenomenon only appears when meet 3 conditions:

    1. set QApplication::setAttribute(Qt::AA_EnableHighDpiScaling); in main() function
    2. set setAttribute(Qt::WA_TranslucentBackground); setWindowFlags(Qt::FramelessWindowHint); in mainWindow
    3. set windows system dpi to 125%, 150%, 175% or some not X00% value。

    Could you please tell me how to avoid this gap to be rendered, or how can I achieve both transparent background and supporting different DPI with another solution?
    Thanks :)

    below is my simple demo to descibe this bug

    main.cpp

    #include "mainwindow.h"
    
    #include <QApplication>
    
    int main(int argc, char *argv[])
    {
        QApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
        QGuiApplication::setHighDpiScaleFactorRoundingPolicy(Qt::HighDpiScaleFactorRoundingPolicy::PassThrough);
        QApplication a(argc, argv);
        MainWindow w;
        w.show();
        return a.exec();
    }
    
    

    mainwindow.h

    #ifndef MAINWINDOW_H
    #define MAINWINDOW_H
    
    #include <QMainWindow>
    
    QT_BEGIN_NAMESPACE
    namespace Ui { class MainWindow; }
    QT_END_NAMESPACE
    
    class MainWindow : public QMainWindow
    {
        Q_OBJECT
    
    public:
        MainWindow(QWidget *parent = nullptr);
        ~MainWindow();
    
    private:
        Ui::MainWindow *ui;
    };
    #endif // MAINWINDOW_H
    

    mainwindow.cpp

    #include "mainwindow.h"
    #include "ui_mainwindow.h"
    
    MainWindow::MainWindow(QWidget *parent)
        : QMainWindow(parent)
        , ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
    
        setAttribute(Qt::WA_TranslucentBackground);
        setWindowFlags(Qt::FramelessWindowHint);
    }
    
    MainWindow::~MainWindow()
    {
        delete ui;
    }
    

    mainwindow.ui

    <?xml version="1.0" encoding="UTF-8"?>
    <ui version="4.0">
     <class>MainWindow</class>
     <widget class="QMainWindow" name="MainWindow">
      <property name="geometry">
       <rect>
        <x>0</x>
        <y>0</y>
        <width>800</width>
        <height>600</height>
       </rect>
      </property>
      <property name="windowTitle">
       <string>MainWindow</string>
      </property>
      <widget class="QWidget" name="centralwidget">
       <widget class="QWidget" name="widget" native="true">
        <property name="geometry">
         <rect>
          <x>120</x>
          <y>110</y>
          <width>291</width>
          <height>411</height>
         </rect>
        </property>
        <property name="styleSheet">
         <string notr="true">background-color: white; border-radius: 5px</string>
        </property>
        <widget class="QPushButton" name="pushButton">
         <property name="geometry">
          <rect>
           <x>40</x>
           <y>60</y>
           <width>141</width>
           <height>91</height>
          </rect>
         </property>
         <property name="styleSheet">
          <string notr="true">QPushButton{ background-color: gray} QPushButton:hover:!pressed { background-color: #dddddd; }</string>
         </property>
         <property name="text">
          <string/>
         </property>
        </widget>
        <widget class="QPushButton" name="pushButton_2">
         <property name="geometry">
          <rect>
           <x>40</x>
           <y>220</y>
           <width>111</width>
           <height>81</height>
          </rect>
         </property>
         <property name="styleSheet">
          <string notr="true">QPushButton{ background-color: gray} QPushButton:hover:!pressed { background-color: #dddddd; }</string>
         </property>
         <property name="text">
          <string/>
         </property>
        </widget>
       </widget>
      </widget>
      <widget class="QMenuBar" name="menubar">
       <property name="geometry">
        <rect>
         <x>0</x>
         <y>0</y>
         <width>800</width>
         <height>21</height>
        </rect>
       </property>
      </widget>
      <widget class="QStatusBar" name="statusbar"/>
     </widget>
     <resources/>
     <connections/>
    </ui>
    

Log in to reply