search

outline / outline

The fastest knowledge base for growing teams. Beautiful, realtime collaborative, feature packed, and markdown compatible.
https://www.getoutline.com
Other
28.36k stars 2.26k forks source link

firefox on android -> unreadable status bar #2430

Closed Snuupy closed 2 years ago

Snuupy commented 3 years ago

On firefox on android in the home shortcut/install to home app, the statusbar is white and blocks the text from being read. For comparison, web apps such as thelounge have a readable statusbar at the top.

To Reproduce Steps to reproduce the behavior:

  1. open outline in firefox
  2. install app to home
  3. open installed app
  4. see that the status bar is white

Please look at the top of the screenshots for the following:

firefox: https://i.imgur.com/LxZwLfn.png chrome: https://i.imgur.com/NFsdXNF.png

Expected behavior

Statusbar should be black like in chrome (assuming dark mode in app and dark mode set for system). This bug does not apply when you visit outline in the browser via URL, it only shows up when the web app shortcut is added and "installed" as a PWA (progressive web app).

Screenshots

attached above

Outline (please complete the following information):

Mobile (please complete the following information):

tommoor commented 3 years ago

@iamsaumya don't suppose you have an android device to see if you can reproduce?

iamsaumya commented 3 years ago

I don't manage a self-hosted outline yet 😅

tommoor commented 3 years ago

Invited you to a test cloud instance incase it's useful

iamsaumya commented 3 years ago

I'm able to reproduce but only when the system is in light mode, and the app is in dark mode.

Snuupy commented 3 years ago

Edit: I can also reproduce this on the official servers at getoutline.com: https://i.imgur.com/uGCHy0e.png

To clarify:

I always have outline theme setting selected to "system" to match the device.

I have taken screenshots of the various settings.

https://imgur.com/a/PdqerJd

The schema of the text in the screenshots is [device theme] + [outline theme].

dark + system means device theme is dark, outline theme is system.

dark + dark means device theme is dark, outline theme is dark

light + light means device theme is light, outline theme is light

device theme outline theme works in ff? works in chrome?
light system yes yes
light light yes yes
light dark yes yes
dark system no yes
dark light no yes
dark dark no yes

If you don't have an android phone (and are willing to spend the installation time) you can also run an android emulator/VM through Android Studio.

iamsaumya commented 3 years ago

Thank you so much for the details. In contrast, on my device (POCO X3) the results are quite opposite 😅 . Nonetheless, we at least know there is something going wrong here.

device theme outline theme works in ff? works in chrome?
light system no yes
light light no yes
light dark no yes
dark system yes yes
dark light yes yes
dark dark yes yes
iamsaumya commented 3 years ago

@Snuupy Could you please check your firefox browser theme settings?

The above results were when I had a dark theme selected for the browser. The status bar has become readable in PWA after changing it to follow the device theme.

Snuupy commented 3 years ago

@Snuupy Could you please check your firefox browser theme settings?

The above results were when I had a dark theme selected for the browser. The status bar has become readable in PWA after changing it to follow the device theme.

Whether I select "Follow device theme" or "Dark", the status bar is still white using the PWA.

tommoor commented 3 years ago

For reference, search the codebase for theme-color to find places where we set the status bar color based on theme.

stale[bot] commented 2 years ago

Hey! The issue has been automatically marked as stale because it has not had recent activity. It will be closed soon if no further activity occurs. Please reply here if you wish for the issue to be kept open.

Snuupy commented 2 years ago

reply

stale[bot] commented 2 years ago

Hey! The issue has been automatically marked as stale because it has not had recent activity. It will be closed soon if no further activity occurs. Please reply here if you wish for the issue to be kept open.

Snuupy commented 2 years ago

reply

github-actions[bot] commented 2 years ago

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days

github-actions[bot] commented 2 years ago

Automatically closed due to inactivity