[Fixed] Fullscreen Display Issue on Mobile Devices

Bug Reports
1

Hello Anvil Community,

I am currently experiencing an issue with my Anvil web application when viewed in fullscreen mode on mobile devices and I’m hoping someone might be able to provide some insight or suggestions.

The issue is as follows: when the web application is viewed in fullscreen mode (for example, when the webpage is added to the home screen on iOS or Android devices), the status bar and the background behind the app display in light blue. This issue does not occur when the web application is viewed in a browser with the toolbar visible.

I have tried various solutions to resolve this issue, including adjusting the CSS for the body and HTML elements, and adding meta tags to control the color of the status bar. However, none of these solutions have resolved the issue.

What’s puzzling is that I did not make any changes to the code that could have caused this issue. It just started appearing one day, approximately 1-2 weeks ago. I have checked several older branches of the code that I haven’t touched in months, and the issue persists in those as well. Furthermore, this issue is also happening to past projects that I have not touched in months.

Given these circumstances, I am wondering if this could be an issue related to the Anvil framework. I would greatly appreciate any insights or suggestions from the community to help me resolve this issue.

Thank you in advance for your assistance.

1 Like
2

I’ve made further attempts to troubleshoot the issue and have discovered some additional details that might be relevant.

To recap, the status bar color is currently light blue (#2196F3), and I am unable to change it. This color does not match any of the colors in my app’s color scheme settings, and it persists even in older versions of my app where the issue wasn’t present. The issue started appearing less than a month ago without any changes in the code that could have caused it.

Since my last post, I have tried several more methods to resolve this issue:

  1. Inspecting the Web Page: I used the browser’s inspect element tool to look for references to the problematic color in the rendered HTML and CSS. The color was found in the manifest.json file under the “theme_color” and “background_color” properties. This file is a configuration file that provides information about my web application to the browser.

  2. Changing the Color Scheme Settings: In a new app, changing the “Primary” color in the list changes the status bar color. However, this doesn’t work in my original app.

  3. Renaming the Color Roles: I tried renaming the Primary 500 color role in my app’s color scheme settings. When I changed the name to just Primary or anything other than ‘Primary 500’, a new color role named Primary 500 appeared at the bottom of the list with the color #2196F3, which is the color of the status bar. However, changing the color of this new role didn’t affect the status bar color.

Despite these efforts, the status bar color remains unchanged. The fact that the problematic color is found in the manifest.json file and appears as a color role when Primary 500 is renamed suggests that it’s somehow tied to these elements. However, I am unable to change it from the Anvil editor.

I would appreciate any further assistance or insights from the community in helping me understand how the color roles and the manifest.json file interact, and how I can change the status bar color in my app.

For additional context, I’m using the Material Design theme in Anvil.

Thank you again in advance.

3

Yeah, I had the same problem in my app. You are right that the cause is manifest.json.

To fix it, you can just overwrite your manifest.json. Remove the existing one by adding this to your Native Libraries

<script>
document.querySelectorAll('[rel="manifest"]')[0].remove()
</script>

Then just create a new manifest.json in your Assets with the changes and import it.

<link rel="manifest" href="_/theme/manifest.json">
2 Likes
4

Thanks for the response,

I’ve tried following your instructions, but unfortunately, I’m still experiencing the same issue with the status bar color on my app when viewed on mobile devices. Here’s what I’ve done:

  1. I created a manifest.json file in the Assets service. However, since Anvil doesn’t seem to directly support creating .json files, I initially created a .html file so I could write to it and then renamed it to .json, but the contents disappeared once I renamed it. I’m not sure if the contents were erased or just hidden when I renamed it.

  2. I added the link to the manifest.json file in my standard-page.html file. The code looks like this:

<link rel="manifest" href="_/theme/manifest.json">
  1. I also removed the manifest.json file by adding the following code to the bottom of my Native Libraries file:
<script>
document.querySelectorAll('[rel="manifest"]')[0].remove()
</script>

Despite these changes, the status bar color issue seems to still persist. How did you create the manifest.json file in your case?

5

Sorry about that - this looks like a bug from our end where a dependency color scheme is overriding your primary color.

We’ll get that fixed and update this thread.

2 Likes
6

Thank you. The right colors are now being displayed and it seems like the issue has been resolved on my end.

1 Like