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
This issue happens for both Web Access and Web Admin.
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 ║ ╚════════════╩══════════════╩════════════╩════════════════╝
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
This has also been reported to Apple: https://feedbackassistant.apple.com/feedback/11831381
The chrome issue on iPadOS has been reported here: https://bugs.chromium.org/p/chromium/issues/detail?id=1394342
(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.
Also, problems with Epiphany. From bug 7998, comment 33: https://gitlab.gnome.org/GNOME/epiphany/-/issues/1904
The Firefox issue on iPadOS was reported here: https://github.com/mozilla-mobile/firefox-ios/issues/12546
(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.
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.
The issue to Apple mentioned in comment 9 has been updated to contain info about the share icon.
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.
