Status bar in Ionic keeps flashing or stays white

Ionic Framework Ionic Angular
21

Hello @cbinnefeld,

Adding the config block mentioned earlier to config.xml seems to fix the problem for us on both of our TC56 test devices.

We tested both with the Enterprise Home Screen launcher as well as the normal/default Android launcher.
We still have the ion-menu in our app.

We did a quick run through our app, but we dont see any “not so beautiful” UI elements? What do you mean by that?

The only change/improvement we see/want is that our status bar at the top and at the bottom are no longer white (and/or flickering).
The bottom bar with the Android back/home/recent buttons stays black, as we want.
The bar at the top changes to a desired color for certain pages as we defined in code.

So for us it seems you provided a real fix. We dont see any downside at this moment.
We provided a test build to one of our customers in order to test on more devices.

I still have tickets pending at Zebra, but their first response was to ask for support at Ionic (or Chrome for the WebView part).
They are currently still investigating, but Ill provide this information to them, depending on what they come back with.

22

Hello @ricardodebeijer,

we also created a ticket at zebra.

The only “not so beautiful” UI element at the moment is the loading indicator of the splash screen, which we could disable without a problem. But we are also using some native controls which could also be changed by the theme. As exmple: On the left side is the translucent theme and on the right the default device theme.

Translucent
Translucent1158×1838 97.3 KB
Default
Default1158×1838 96.1 KB

Context-Translucent
Context-Translucent1158×1838 147 KB
Context-Default
Context-Default1158×1838 153 KB

So this fix could leed to a few blemishes in our application.

23

Hey @ricardodebeijer,

any updates about your tests and your cases with zebra?

Could it be possible for you to give me the ticket number of your case with zebra? Maybe we’re more likely to get an answer when Zebra is aware that more people have the problem.

24

Hey @cbinnefeld,

The customer who received a test build from us has finished testing with a smaller set of devices and is starting to roll out to more devices. So far it seems to resolve the problem on all devices.
We do see the same visual change when higlighting a piece of text for example as in your screenshot.

We created two tickets at Zebra, one trough their ticketing system with number 09340782, but we did not receive a new response yet. I am already getting a automatic email asking if it was resolved… So not sure what they are doing.

The other ticket is trough our After Sales contact person, but we dont have a ticket number for that. We dont even have an answer back other then “we will look at it”.

25

Hi,

I’ve been following this thread closely and I have found another solution to this problem, I hope it works for you too.

We had the same effects, installing the zebra update on 8.1 breaks the status bar, flickering etc. I’ve managed to debug the effect, it seems that the status bar tries to match the content color. Setting the theme meta tag did nothing. We’ve also noticed that removing the ion-menu sometimes resolved the problem when switching to another app and back.

The solution we’ve found after many hours was to disable the CSS Trick for gpu/hardware acceleration on the .menu-content CSS class:

.platform-android8_1 .menu-content, // ionic 3
.plt-android .menu-content {
  transform: none
}

This will override the gpu acceleration trick and fixed the flickering / white status bars without any known side effects on all of our apps on zebras w/ 8.1.

Good luck!

1 Like
26

Hello all,

Thanks for sharing the possible solutions you all had found.

I’ve tried out both (config.xml and css) changes and both seem to work for me.
Strangely they also both have the same side-effect results; the loader that is visible on the splashscreen changes from a clean light blue to a bulky “old school” grey/white loader.

As that is only visible for like 1-2 seconds at start it is not a big deal for us.

27

Hi all!
We are also experiencing the same problems with Zebra devices. We just tried something. Ionic’s ion-footer has a z-index of 10. We changed it to 5… and for the time being the header does not flicker…
We also implemented the theme fix mentioned a few posts back.

It’s worth a shot… and please do report back if the issue is resolved.

ion-footer{
    z-index: 5 !important;
}

Best of luck!

28

Since our upgrade to capacitor i fixed the problem with following style in the styles.xml

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:background">@null</item>
    </style>
29

I used to use this configuration but it is crashing my app now when using ionic 6, have you experience the same issue?

30

What cordova-android version are you using?

If you are using cordova-android10 the problem is that “@android:style/Theme.Translucent” doesn’t exist anymore. You can find the existing themes here: sdk/extras/android/support/v7/appcompat/res/values/themes.xml - android_tools - Git at Google

You will need to create a new theme. For example: “resources/android/values/themes.xml”. My Parent is “Theme.AppCompat.Light” because the default AppCompat colors are dark.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.AppCompat.Light.Translucent" parent="Theme.AppCompat.Light">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowAnimationStyle">@android:style/Animation.Translucent</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
</resources>

in your config.xml add the following:

        <resource-file src="resources/android/values/themes.xml" target="app/src/main/res/values/themes.xml" />
        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application/activity" xmlns:android="http://schemas.android.com/apk/res/android">
            <activity android:theme="@style/Theme.AppCompat.Light.Translucent" />
        </edit-config>
31

I am using cordova-android 11, I implemented your suggested changes, but now I get this other error:

Adding cordova-android-support-gradle-release to package.json
Cannot read property 'find' of null
[ERROR] An error occurred while running subprocess cordova.
cordova platform add android --save exited with exit code 1.

image

image
image1208×74 39.4 KB

image

32

Hi there
if it is is still a thing: i think i found an pretty simple solution:

set height for html in css to 100% (100vh will not do it)

if that works for u too let me know.

css:
html {
height: 100%;
}

greets

edit: i still had some rare occurencies. now set max-height to 100% too and also added !important. added the same css props for the body too…
seems good now.

html { height: 100% !important; max-height: 100% !important; }

body { height: 100% !important; max-height: 100% !important; }

33

check my answer (last one #32). maybe it helps. using zebra device too…