[Bug]: Avatar thumbnail (status indicator) colours inverted after upgrade to 25.0.5 or 26.0.0

[wwklnd]

⚠️ This issue respects the following points: ⚠️

• This is a bug, not a question or a configuration/webserver/proxy issue.
• This issue is not already reported on Github (I've searched it).
• Nextcloud Server is up to date. See Maintenance and Release Schedule for supported versions.
• Nextcloud Server is running on 64bit capable CPU, PHP and OS.
• I agree to follow Nextcloud's Code of Conduct.

Bug description

I'm creating this issue after it was suggested by @solracsf in #37357 (comment)_

After upgrading to 26.0.0 I noticed that my user avatar had its colours inverted, but only in the top right corner with the status indicator, which seems incredibly odd. It seems like the status icon itself is also inverted (compare the green icon by the large avatar in the middle with the purple-ish one in the top right).
Image for reference, showing what the image looks like on my user profile (which renders it properly):

Steps to reproduce

1. Upgrade from 25.x.x to 26.0.0 using the OTA updater in the admin panel.
2. Log in to Nextcloud after update.

Expected behavior

I expect the avatar/status icon to render with non-inverted colours.

Installation method

Community Docker image

Operating system

Debian/Ubuntu

PHP engine version

PHP 8.0

Web server

Nginx

Database engine version

MariaDB

Is this bug present after an update or on a fresh install?

Updated to a major version (ex. 22.2.3 to 23.0.1)

Are you using the Nextcloud Server Encryption module?

Encryption is Disabled

What user-backends are you using?

• Default user-backend (database)
• LDAP/ Active Directory
• SSO - SAML
• Other

Configuration report

{
    "system": {
        "memcache.local": "\\OC\\Memcache\\APCu",
        "datadirectory": "***REMOVED SENSITIVE VALUE***",
        "instanceid": "***REMOVED SENSITIVE VALUE***",
        "passwordsalt": "***REMOVED SENSITIVE VALUE***",
        "secret": "***REMOVED SENSITIVE VALUE***",
        "trusted_domains": [
            "cloud.wklnd.me"
        ],
        "dbtype": "mysql",
        "version": "26.0.0.11",
        "overwrite.cli.url": "https:\/\/cloud.wklnd.me",
        "dbname": "***REMOVED SENSITIVE VALUE***",
        "dbhost": "***REMOVED SENSITIVE VALUE***",
        "dbport": "",
        "dbtableprefix": "oc_",
        "mysql.utf8mb4": true,
        "dbuser": "***REMOVED SENSITIVE VALUE***",
        "dbpassword": "***REMOVED SENSITIVE VALUE***",
        "installed": true,
        "mail_smtpmode": "smtp",
        "mail_smtpsecure": "ssl",
        "mail_sendmailmode": "smtp",
        "mail_from_address": "***REMOVED SENSITIVE VALUE***",
        "mail_domain": "***REMOVED SENSITIVE VALUE***",
        "mail_smtpauth": 1,
        "mail_smtpauthtype": "LOGIN",
        "mail_smtphost": "***REMOVED SENSITIVE VALUE***",
        "mail_smtpport": "465",
        "mail_smtpname": "***REMOVED SENSITIVE VALUE***",
        "mail_smtppassword": "***REMOVED SENSITIVE VALUE***",
        "default_phone_region": "SE",
        "loglevel": "2",
        "maintenance": false,
        "theme": "",
        "updater.secret": "***REMOVED SENSITIVE VALUE***"
    }
}

List of activated Apps

Enabled:
  - activity: 2.18.0
  - admin_audit: 1.16.0
  - calendar: 4.3.1
  - circles: 26.0.0
  - cloud_federation_api: 1.9.0
  - comments: 1.16.0
  - contacts: 5.2.0
  - contactsinteraction: 1.7.0
  - dashboard: 7.6.0
  - dav: 1.25.0
  - deck: 1.9.0
  - federatedfilesharing: 1.16.0
  - federation: 1.16.0
  - files: 1.21.1
  - files_external: 1.18.0
  - files_pdfviewer: 2.7.0
  - files_rightclick: 1.5.0
  - files_sharing: 1.18.0
  - files_trashbin: 1.16.0
  - files_versions: 1.19.1
  - firstrunwizard: 2.15.0
  - integration_mastodon: 2.0.1
  - integration_twitter: 1.0.5
  - logreader: 2.11.0
  - lookup_server_connector: 1.14.0
  - mail: 3.0.0
  - nextcloud_announcements: 1.15.0
  - notifications: 2.14.0
  - oauth2: 1.14.0
  - password_policy: 1.16.0
  - photos: 2.2.0
  - privacy: 1.10.0
  - provisioning_api: 1.16.0
  - recommendations: 1.5.0
  - related_resources: 1.1.0-alpha1
  - richdocuments: 8.0.0
  - serverinfo: 1.16.0
  - settings: 1.8.0
  - sharebymail: 1.16.0
  - spreed: 16.0.0
  - support: 1.9.0
  - survey_client: 1.14.0
  - systemtags: 1.16.0
  - tasks: 0.14.5
  - text: 3.7.2
  - theming: 2.1.1
  - twofactor_backupcodes: 1.15.0
  - twofactor_totp: 8.0.0-alpha.0
  - updatenotification: 1.16.0
  - user_status: 1.6.0
  - viewer: 1.10.0
  - weather_status: 1.6.0
  - workflowengine: 2.8.0
Disabled:
  - bruteforcesettings: 2.6.0
  - encryption: 2.14.0
  - files_3dmodelviewer: 0.0.7 (installed 0.0.7)
  - suspicious_login: 4.4.0
  - user_ldap: 1.16.0

Nextcloud Signing status

Technical information
=====================
The following list covers which files have failed the integrity check. Please read
the previous linked documentation to learn more about the errors and how to fix
them.

Results
=======
- core
	- INVALID_HASH
		- core/js/mimetypelist.js

Raw output
==========
Array
(
    [core] => Array
        (
            [INVALID_HASH] => Array
                (
                    [core/js/mimetypelist.js] => Array
                        (
                            [expected] => 4b0a99fbab7bc4824176101150bd0ab2b553e128a390e0f872580db4541462b31aad13099fd41533b6695d1b185dabca26a45e9a78227cfb9479eafa439c7bff
                            [current] => a8e818876a7eff2a2137601eafc6c7d96b99cbf27d94ff9bb59eb237bdab92076ecc2828242bb37551c9c8b6772c0718887bd49cee5b49b3be48d3b9ecaa558f
                        )

                )

        )

)

Nextcloud Logs

No response

Additional info

I installed via the linuxserver/nextcloud docker image, and contacted the maintainers of this image about the issue. They said it was better suited for here.

[MichaIng]

Can you run the occ command within the container and retrigger the integrity check to assure this file does not pass?

A diff would be interesting, and of course you could replace it with the original one:

curl -O https://raw.githubusercontent.com/nextcloud/server/stable26/core/js/mimetypelist.js
diff mimetypelist.js /path/to/nextcloud/core/js/mimetypelist.js

[hul51u]

I upgraded from 25.0.4 to 25.0.5 and the thumbnail of one user is now inverted.

[wwklnd]

Can you run the occ command within the container and retrigger the integrity check to assure this file does not pass?

A diff would be interesting, and of course you could replace it with the original one:

curl -O https://raw.githubusercontent.com/nextcloud/server/stable26/core/js/mimetypelist.js
diff mimetypelist.js /path/to/nextcloud/core/js/mimetypelist.js

I ended up replacing the file manually right after posting this issue, so I already deleted the file alas. But the mimetypelist.js error is fixed after that, at least!

[wwklnd]

Also, just to add extra info since it would be an easy thing to miss: I did try reuploading my avatar, but it sadly did not help.

[MichaIng]

Did you try to clear the browser cache (CTRL+F5) and tested with other browsers?

[wwklnd]

I did try CTRL+F5 a few times, and the issue persists when I use Chromium on a different machine.

[MichaIng]

What file type is this avatar? SVG or another? And the thumbnail? Can be checked via Chromium developer tools.

For SVG ImageMagick is used to create the thumbnails (if installed), not sure whether the same is true for all other image types. And I'm not sure how much control Nextcloud has about the result. I would have expected that Nextcloud only passes the image to PHP imagick/gd API with the task to scale it down to widthxlength and nothing more 🤔. I do not see this in any of the instances I recently updated or had a look at, but since two of your face the same inversion issue, even with NC 25.0.5, it seems like a change on Nextcloud end is responsible and not ImageMagick resp. its PHP module or GD 🤔.

I upgraded from 25.0.4 to 25.0.5 and the thumbnail of one user is now inverted.

Do you use the same Docker container or another setup/appliance?

[wwklnd]

The avatar is a PNG image, as is the thumbnail. Interestingly, inspecting the element shows that the thumbnail file itself isn't inverted. I looked further in the page code and the computed CSS shows that an "invert" filter is applied in CSS, which seems to be intended to be applied to the icons in the same row:

.header-menu__trigger[data-v-98827cda]
var(--background-image-invert-if-bright)

[wwklnd]

For reference, this is what the header looks like by default:

If I disable filter: var(--background-image-invert-if-bright); I get this:

I assume that the intended behaviour is for the icons to be inverted but not the user icon and status indicator.

[szaimen]

cc @skjnldsv @nextcloud/server-frontend

[MichaIng]

Great find!

Introduced with #35666

Currently the other header bar icons (excluding the avatar) do not share a class, so either the avatar needs to be excluded from inversion explicitly (user-menu class), or a new class added for the other elements. I first thought about using inline SVG <svg> tags as identifier, but the Nextcloud logo is an <img> which we want to keep being inverted (custom logos probably not?).

[wwklnd]

Great find!

Introduced with #35666

Currently the other header bar icons (excluding the avatar) do not share a class, so either the avatar needs to be excluded from inversion explicitly (user-menu class), or a new class added for the other elements. I first thought about using inline SVG <svg> tags as identifier, but the Nextcloud logo is an <img> which we want to keep being inverted (custom logos probably not?).

Thanks. :) Yeah, for my instance, I've got a (custom) white SVG logo that I would prefer not to be inverted.

[MichaIng]

I've got a (custom) white SVG logo that I would prefer not to be inverted.

I thought so. That doesn't make the fix easier, but I think its important to not touch any custom uploads, i.e. neither custom logos nor avatars.

[skjnldsv]

Fix in nextcloud-libraries/nextcloud-vue#3974