Status bar in Ionic keeps flashing or stays white

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.

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.

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

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.

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”.

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

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.