QML Label dispays images with a blue-ish tint

REPRODUCIBILITY (% or how often): 100%
BUILD ID = OS VERSION (Settings > About product): 4.2, and prior
HARDWARE (XA2, X10, X10 II, …): X, XA2, maybe JC?
REGRESSION: (compared to previous public release: Yes, No, ?): No


This: [Bug]Qml Label with images not correctly shown on xperia phones - together.jolla.com


Have an image, preferably with white people skin in show.


Create a simple Sailfish application with a QML page with something like:

Label {
  text: '<img src="/path/to/image">'


Image shows as normal


Image has a blue-ish tint, like in the TJC report - observe the faces.


This post is aimed at resurrecting the report in TJC as we can’t vote any more, but most importantly: to find out if there is any insight as to how to workaround it without parsing the rich text and separating the images into Image, which does display properly.
Also, this doesn’t show in the emulator.


Strange. I created a Page with 2 image sources. One is a .png wifi logo, the other, a random image of Marc Dillon and Sami Pekinniininninini.

On first build the image of Marc and Sammi displayed correctly, no blueish tinge. When I decided to edit the code and refresh it, the image then displayed with the blueish tinge.

Notably, I also tested this in QtCreator Community Build, the blue does NOT occur no matter what I do with the image or text. I kept the code as identical as I could for QtCreator and SailfishSDK.

In with the mix, I included a Label with a wifi.png logo just to see what happens, this displays as expected, no tinting/discolouring at all.

Here’s a screenshot of the first time build;

Here’s a screenshot after a subtle edit which I then decided not to apply, the image returns with the blue tint. I went to add an ‘id’ then realised I already had…;

Now Marc and Sammi look like they have been drinking colloidal silver, I stopped and rebuilt the application, now the image is displayed as shown in the first image, Marc and Sammi are ‘normal’ once again.

Here’s my code;

import QtQuick 2.2
import Sailfish.Silica 1.0
import "../images"

Page {
    id: page

    allowedOrientations: Orientation.All

    Column {
        spacing: 100
        width: parent.width
        anchors.centerIn: parent

        // png image
        Label {
            id: text
            text: "Available Here <img src='../images/wifi-logo.png'> Free To All Customers"
            font.pixelSize: 60
            anchors.horizontalCenter: parent.horizontalCenter
        // jpg image
        Label {
            id: marcSammi
            text: "Marc <img src='../images/marc-sammi.jpg'> Sammi"
            font.pixelSize: 60
            anchors.horizontalCenter: parent.horizontalCenter

EDIT: I also note that each time I start the application on my Xperia 10 ii that the image of Marc and Sammi displays correctly, their colouring is normal. A strange bug indeed and notably, does not occur in normal QtCreator as previously mentioned.

Also, if I link directly to the image of Marc and Sammi (https://blog.jolla.com/content/uploads/2018/11/IMG_4162.jpg) the image still has this blueish tinge.

I tried both PNG and JPG of the same image in my Sailfish application, but both yield the same result.

1 Like

This bug (or a setting related to the highlight colours in a container?) also exists in tidings. In tidings it happens to html from feeds rendered after some filtering. There are too many wrapping elements to see it at a glance. It’s on the list but I’m stuck in another debugging adventure so it might take some time.

Is there some default setting like, color: Theme.highlightColor?

The highlight only affects the text color, not the image, if I set “white” for text colour, the image remains blueish.

yeah, resurfaced this because of tidings :slight_smile: it’s also mentioned in the original tjc report. It must be some hw adaptation wierdness.

1 Like

I did spot an image today that displayed correctly, I don’t remember seeing this before, the only difference to the state when I wrote this post is that I’m on 4.3 now (or perhaps I only noticed because you mentioned it and I started paying attention :slight_smile: ).
Strangely, video thumbnails don’t seem to be affected.

Duplicate of Label / Text - RichText styling / theming - #2 by Edz

To me the picture looks like it has mixed red and blue channels, i.e. as if BGR was used instead of RGB. I wonder if there is some uninitialized value somewhere that just happens to be right or wrong depending on what was in memory before.