[Bugs] Firefox for Android PWA Logo & Status Bar Issues

[astarq]

Describe the bug
1: When installed using Firefox for Android, the PWA shortcut has no logo. It's just lot of blinding white (see the first screenshot)

2: When opened in Firefox for Android, with the device dark mode enabled, the status bar and statusbar icons are white (see the second screenshot)

Both of these issues have only been present since version 3.0 of Cryptee (I think that's the right version number, anyway. If not, it's the big update which recently dropped)

Also, yes, these are two separate bugs, but I'm lazy 🤪

To Reproduce
Steps to reproduce the behavior:
1: Navigate to https://crypt.ee/home using any of Mozilla's Android browsers, or any fork based on Fenix
2: Add it to the home screen
3: Open the shortcut
Expected behavior
1: The shortcut should be decorated with the Cryptee logo
2: The statusbar should be dark or black, as it is in any Chromium or webview based browser, and as it was before version 3.0 of Cryptee
Screenshots
1:

2:

^ Firefox (I'm well aware that my amount of installations may or may not be slightly excessive 👀)

^ Bromite

System Information:

• OS: Android 10, LineageOS
• Browser: Firefox
• Browser Version: 85 (+)

Additional context
Add any other context about the problem here.

[johnozbay]

Hey there!
Thanks a lot for filing this @astarq! Both I and Mozilla folks owe you a lot for hunting these Firefox & Cryptee bugs!
Also – I believe that no amount of Cryptee installations is excessive hahahahah [you should see my poor phone]

I think I actually know what's going on.
Basically, browsers don't really provide a built-in way to swap the favicon image of websites when users switch between dark mode / light mode. This is the icon I'm talking about :

And to work around this problem, we came up with a rather weird and unique solution. Turns out browsers support SVG favicons. And SVG supports built in CSS media queries. Long story short, thanks to this, our favicon is both white over black and black over white if your browser supports SVG favicons. (which most browsers do)

So we can get both this,

and this :

with a single file on browsers that support SVG favicons, and they change if you change your device from dark mode to light mode! Magic 🤯

Now. Normally, when you install a PWA, browsers should use the app-icon provided by the manifest, which for Cryptee is here:

web-client/source/webapp.json

Lines 25 to 28 in d83c0fc

	"src": "../assets/maskable-logo.png",
	"type": "image/png",
	"sizes": "512x512",
	"purpose" : "maskable"

I think what's going on is that, Firefox on Android isn't using the manifest provided app-icon, but trying to use the FAVICON for home-screen installations. Chances are, firefox checks our favicon logo, and since it's 'white' in dark mode, but black in light mode (to contrast with the background color of tabs) – and presumably what happens is that Firefox just uses the white icon over white background and you get that blank white circle.

I'll have to do a bunch of tests to figure out how or why this happens. Because our Android 10 / Firefox test devices don't seem to have this icon problem at all. Chances are there's some other quirky thing happening with Firefox here.

As for the status bar, I'll also have to check what causes this, but chances are these two are actually related. So it's a perfect bug report! haha

Thanks a lot for filing this! I'll check it all out and keep this thread updated. ✌🏻

[johnozbay]

Plot twist. Looks like this is in fact a Firefox bug.

[astarq]

Hey again!
Apologies for the ridiculously late reply! I must've deleted the notification for your first reply on autopilot - something I tend to do to most of the plethora of notifications github sends my way haha 🤦

Anyways, you're welcome! I'm just glad that these awesome projects exist :)

As always, thanks for the detailed explanation - and oops, apologies for misplacing this bug! The Android version of Firefox definitely has its fair share of quirks, so I'm not surprised to see that this is a browser-side problem.
I'll close this thread now, and hopefully the dev's over at Mozilla will look into it soon!

Thanks for the detailed explanation, as always!
P.S. great to see so many Cryptee updates rolling out, keep up the good work!

[johnozbay]

Hey there!
No worries at all! Hahah you should see my github notification emails.

If you wouldn't mind, I'll actually keep this issue open.
It would allows us to keep track of the status, we can check with Mozilla folks, and close when it's fixed (or confirmed that it won't ever get a fix in the future etc)

Many thanks for filing these! ✌🏻

great to see so many Cryptee updates rolling out

– and thank you!
We're trying our best to release bugfix updates once every week or two, but major features might of course take longer!

[astarq]

Ok, no problem!

Good look squashing all those pesky bugs :)