Bug 8036 - Favicon sometimes get a white background
Summary: Favicon sometimes get a white background
Status: NEW
Alias: None
Product: ThinLinc
Classification: Unclassified
Component: Web Access (show other bugs)
Version: trunk
Hardware: PC Unknown
: P2 Normal
Target Milestone: LowPrio
Assignee: Bugzilla mail exporter
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2022-11-28 11:00 CET by Linn
Modified: 2022-12-15 13:41 CET (History)
0 users

See Also:
Acceptance Criteria:


Attachments
White background showing for ThinLinc and other sites (308.69 KB, image/jpeg)
2022-11-28 11:00 CET, Linn
Details

Description Linn cendio 2022-11-28 11:00:23 CET
Created attachment 1084 [details]
White background showing for ThinLinc and other sites

As part of bug 7998, we started following Apple's recommendations and added a white background to our apple-touch-icons.

However, these icons are sometimes used when they shouldn't be. This causes our favicons to have a white background instead of a transparent one. 

This issue is mainly seen on Firefox Android, but we have also noticed a few cases in both Chrome and Safari.

It was reported to Firefox here:
https://bugzilla.mozilla.org/show_bug.cgi?id=1799691
Comment 1 Linn cendio 2022-11-28 11:01:02 CET
This issue happens for both Web Access and Web Admin.
Comment 2 Linn cendio 2022-11-28 11:08:41 CET
These are the problematic cases.

╔════════════╦══════════════╦════════════╦════════════════╗
║ Browser    ║ Item         ║ Used image ║ Displayed size ║
╠════════════╩══════════════╩════════════╩════════════════╣
║ Android 12 Galaxy Tab S7 (Scaling factor 2x)            ║
╠════════════╦══════════════╦════════════╦════════════════╣
║ Chrome     ║ tab overview ║ 180        ║ 40             ║
╠════════════╬══════════════╬════════════╬════════════════╣
║ Firefox    ║ tab overview ║ 180        ║ 34             ║
╠════════════╬══════════════╬════════════╬════════════════╣
║            ║ bookmark     ║ 180        ║ 51             ║
╠════════════╬══════════════╬════════════╬════════════════╣
║            ║ shortcuts    ║ 180        ║ 77             ║
╠════════════╬══════════════╬════════════╬════════════════╣
║            ║ A2HS dialog  ║ 180        ║ 68             ║
╠════════════╬══════════════╬════════════╬════════════════╣
║            ║ A2HS         ║ 180        ║ 114            ║
╠════════════╩══════════════╩════════════╩════════════════╣
║ Android 13 Galaxy S22 U (Scaling factor 3.5x)           ║
╠════════════╦══════════════╦════════════╦════════════════╣
║ Chrome     ║ tab overview ║ 180        ║ 65             ║
╠════════════╬══════════════╬════════════╬════════════════╣
║ Firefox    ║ tab          ║ 180        ║ 56             ║
╠════════════╬══════════════╬════════════╬════════════════╣
║            ║ bookmark     ║ 180        ║ 84             ║
╠════════════╬══════════════╬════════════╬════════════════╣
║            ║ shortcuts    ║ 180        ║ 126            ║
╠════════════╬══════════════╬════════════╬════════════════╣
║            ║ A2HS dialog  ║ 180        ║ 192            ║
╠════════════╬══════════════╬════════════╬════════════════╣
║            ║ A2HS         ║ 180        ║ 192            ║
╠════════════╩══════════════╩════════════╩════════════════╣
║ iPadOS 16.1.1                                           ║
╠════════════╦══════════════╦════════════╦════════════════╣
║ Chrome     ║ tab          ║ 180        ║ 32             ║
╠════════════╬══════════════╬════════════╬════════════════╣
║            ║ bookmark     ║ 180        ║ 32             ║
╠════════════╬══════════════╬════════════╬════════════════╣
║ Safari     ║ favorites    ║ 180        ║ 152            ║
╠════════════╬══════════════╬════════════╬════════════════╣
║            ║ reading list ║ 180        ║ 145            ║
╠════════════╩══════════════╩════════════╩════════════════╣
║ Mac                                                     ║
╠════════════╦══════════════╦════════════╦════════════════╣
║ Safari     ║ favorites    ║ 180        ║ 64             ║
╠════════════╬══════════════╬════════════╬════════════════╣
║            ║ reading list ║ 180        ║ 52             ║
╚════════════╩══════════════╩════════════╩════════════════╝
Comment 3 Linn cendio 2022-11-28 14:54:18 CET
This issue has been reported to chrome. It was split into two separate issues - one for the regular tabs and one for the tab grid overview:

https://bugs.chromium.org/p/chromium/issues/detail?id=1381407
https://bugs.chromium.org/p/chromium/issues/detail?id=1394000
Comment 4 Linn cendio 2022-11-28 17:02:32 CET
This has also been reported to Apple:
https://feedbackassistant.apple.com/feedback/11831381
Comment 5 Linn cendio 2022-11-29 10:35:45 CET
The chrome issue on iPadOS has been reported here:
https://bugs.chromium.org/p/chromium/issues/detail?id=1394342
Comment 6 Linn cendio 2022-11-29 13:39:32 CET
(In reply to Linn from comment #4)
> This has also been reported to Apple:
> https://feedbackassistant.apple.com/feedback/11831381

The reason this didn't end up as a bug at webkit is because favorites and reading list are features of safari, not webkit.
Comment 7 Pierre Ossman cendio 2022-11-30 11:49:19 CET
Also, problems with Epiphany. From bug 7998, comment 33:

https://gitlab.gnome.org/GNOME/epiphany/-/issues/1904
Comment 8 Linn cendio 2022-11-30 14:22:28 CET
The Firefox issue on iPadOS was reported here:
https://github.com/mozilla-mobile/firefox-ios/issues/12546
Comment 9 Linn cendio 2022-12-02 12:28:50 CET
(In reply to Linn from comment #4)
> This has also been reported to Apple:
> https://feedbackassistant.apple.com/feedback/11831381
Info copied from the bug, in order to not have to log in to see it:


Icons in reading list and favorites have unwanted white background
------------------------------------------------------------------

Steps to reproduce the problem: 
1. Open the attached test.html in Safari on iPad 
2. Add the page to reading list and favorites 
3. Observe the pink text on the added favicon 

Problem Description: 
The icon here gets a white background, despite the regular icon having a transparent background. 

This issue is mostly visible in dark mode, the white background stems from apple-touch-icons. These icons have opaque backgrounds. 

Using the attached test.html (and ICO and PNG), we can see this behaviour. The ICO and PNG are labelled with their image size. Icons in the ICO have green text, and the apple-touch-icon have pink text.
Comment 10 Pierre Ossman cendio 2022-12-07 10:35:09 CET
This also happens in the "Share" menu in Safari on macOS.

Besides the white background, the image also looks aliased, which could be because of some bad scaling.
Comment 11 Linn cendio 2022-12-13 16:39:40 CET
The issue to Apple mentioned in comment 9 has been updated to contain info about the share icon.
Comment 12 Linn cendio 2022-12-15 13:41:23 CET
After testing done on bug 7998, we discovered some additional problematic cases. See the complete list below:

Epiphany on Linux
-----------------
   * Create web application icon
   * Application manager
   * Application launcher icon

https://gitlab.gnome.org/GNOME/epiphany/-/issues/1905

Firefox on Android
------------------
   * Tab overview icon
   * Jump back in
   * Recently visited
   * History
   * Shortcuts
   * Add to home screen dialog
   * Add to home screen second dialog
   * Home screen icon

https://bugzilla.mozilla.org/show_bug.cgi?id=1799691

Chrome on Android
-----------------
   * Tab icon
   * Tab overview icon
   * Recently closed

https://bugs.chromium.org/p/chromium/issues/detail?id=1381407
https://bugs.chromium.org/p/chromium/issues/detail?id=1394000

Edge on Android
---------------
   * Tab icon
   * Recent tabs

Hopefully handled by the Chromium reports above.

Safari on macOS
---------------
   * Reading list
   * Favourites
   * Share menu

https://feedbackassistant.apple.com/feedback/11831381

Firefox on iPadOS
-----------------
   * Tab icon
   * Tab overview
   * History
   * Share

https://github.com/mozilla-mobile/firefox-ios/issues/12546

Chrome on iPadOS
----------------
   * Tab icon
   * Tab overview
   * Shortcuts
   * Share menu
   * Bookmarks

https://bugs.chromium.org/p/chromium/issues/detail?id=1394342

Edge on iPadOS
--------------
   * Tab icon
   * Favourites
   * New tab icons

Hopefully solved by the above Chromium report.

Note You need to log in before you can comment on or make changes to this bug.