Loading...

XML

Word

Printable

Details

Type: Bug
Resolution: Done
Priority: P2: Important
Fix Version/s: 5.13.2, 5.14.0 Alpha
Affects Version/s: 5.12.3
Component/s: Quick: Core Declarative QML
Labels:
- reported_by_support_standard

Commits:
35acc9fc3c41446bacbbfe754f7f494de7f62411 (qt/qtdeclarative/5.12)

Description

Setting a HTML element background-color to transparent in a Text causes the element background to be rendered entirely black instead of transparent. Opacity seems to work perfectly fine as long as it is >= 1%. The behavior with a TextEdit appears identical.

Steps to reproduce:

Run the example below & click on the window to toggle sample text background-color opacity between 1% to 0%.

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 240
    title: qsTr("Hello World")

    MouseArea{
        anchors.fill: parent
        onClicked: {
            exampleText.transparentBackground = !exampleText.transparentBackground
            console.log("Text.text set to: " + exampleText.text)
        }
    }

    Text {

        property string sampleText: "<h1 style=\"background-color:%1\"> Hello. I'm a H1.</h1>"
        property bool transparentBackground: false

        id: exampleText

        color: "orange"
        textFormat: Text.RichText
        text: transparentBackground ? sampleText.arg("rgba(255,255,255,0.00)") :
                                      sampleText.arg("rgba(255,255,255,0.01)")

        font.family: "Arial"

        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
    }
}