Problem
The status bar in our and the ionic example (list and conferenceapp) apps flashes white and then stays white.
It sometimes keeps flashing which is annoying.
What is expected to happen?
The status bar should stay black or change to the color specified (but in the case of the demo the default behavior was expected)
What does happen?
The status bar flashes white and stays white. I cannot change it to another color
Reproduce the issue
Prepare
I used the example project by running:
- “ionic start myApp”
- Choose “Angular” (I have tried them all and all fail)
- Choose “list”
- When asked for “Integrate your new app with Capacitor to target native iOS and Android? (y/N)” I choose “N” (also with Capacitor I get the error)
- When asked for “Create free Ionic account? (y/N)” I choose “N”
- You have the code and example project as I have
Execute
• We open our app and everything works fine
• We close our app by going to the task windows and close the app by swiping it to the right
• Clear app data
• We open our app and everything still works fine
• We close our app by going to the task windows and close the app by swiping it to the right
• We reopen our app and the behavior is visible
Sometimes it is needed to do this a bunch of times, which does not help reproducing the error
Command to execute the Code
ionic cordova run android
Environment, Platform, Device
Ionic info:
Device: Zebra TC56DJ
Android: 8.1.0
Build number: 02-13-15.00-OG-U08-STD
Showcase
I have recorded my screen to show the issue.
In addition I will show the issue for one of our customers:
ShowCase.zip
1 Like
Hi SOrangenxt,
we are experiencing the same problem with a few of our zebra devices.
Did you find a solution for the problem?
Hi @cbinnefeld, I work for the same company as @SOrangenxt , but we did not manage to actually fix this yet.
We did have a workaround, which seemed to help for some time/some cases, but not always worked.
If you check with your Zebra device, go to Developer Options > “Webview implementation” and check that Chrome is the only available (and thus selected) option.
Even after a factory reset, the “Android System webview” is grayed out, so the Chrome webview is always used.
The work around was as follows:
- Go to the app info of Chrome
- Select “Storage”
- Select “Manage Space”
- Select the bottom option “Clear All Data”
- Go back to the app info screen (one screen back)
- In the top right, 3 dots, select “Uninstall updates”
- Open the Play store (you dont have to be signed in with a Google account, select top right 3 dots> updates).
- Reinstall all updates for Chrome
- Remove and reinstall your app
- Open your app (and hope for the best)
I will spend some time in the following days in order to investigate this again, as our customers are again experiencing issues with this.
Hi @ricardodebeijer, thank you for the little update and possible work around.
Maybe it could be helpful if we exchange a few information about the problem to pin point possible origins?
I also found @SOrangenxt issue in the cordova statusbar github (Status bar and software buttons keeps flashing · Issue #203 · apache/cordova-plugin-statusbar · GitHub). And i find it very interesting that we encountered the problem for first time on the same day. A day earlier, 15. Oct, there was the release of a new WebView version (86.0.4240.99). For me it looks like the WebView could have something to do with it?
May I ask you a few questions about the problem?
- Are you running the Enterprise Home Screen (EHS) from Zebra on affected devices?
- Are only Zebra devices effected? We also expierence the on a really small amount of Honeywell devices.
- Which WebView version is running on effected devices?
- Did you found a way to reproduce the problem reliable?
We already tried using capacitor instead of cordova. The problem still persists. So I wonder which component is responsible for the problem.
I hope we can stay in touch regarding the problem.
We also thought that it had something to to with that WebView update, this is why we removed the updates to go back to a previous version.
We just tested the workaround again on two of our devices, and so far the white bars are gone.
But we are still not sure how/why/when they will return.
As for your questions:
- Are you running the Enterprise Home Screen (EHS) from Zebra on affected devices?
→ Yes we are using EHS. For testing I switched back to the normal android home screen, but I also get the white bars when starting the app from there
- Are only Zebra devices effected? We also expierence the on a really small amount of Honeywell devices.
→ Quite coincidentally we have also experienced this on some Honeywell devices (CT60) on Android 8. We upgraded those to Android 9 and the problem seems to have been gone since
- Which WebView version is running on effected devices?
→ Chrome WebView = 89.0.4389.90 (As I did the workaround, I just updated it back from the play store. If I remove all updates I am on version 68.0.3440.91)
→ Android System WebView (which is grayed out) = 68.0.3440.91
- Did you found a way to reproduce the problem reliable?
→ No not yet. After we did the work around on two devices, the problem is gone for now… But we dont know how to get it broken again…
We also made these observations. We are currently testing different scenarios with our customers and try to reproduce it.
Hello,
We have some new information from our testing.
We used the Ionic 5 starter templates, see Installing Ionic - Ionic Documentation.
Tabs: ionic start myApp tabs
Sidemenu/Inbox: ionic start myApp sidemenu
If we install both apps on a Zebra TC56, we DONT get the white bars on the TABS app, but we DO get them on the SIDEMENU/INBOX app.
We compared the package.json/config.xml/app.module.ts/app.component.ts etc of the two apps.
The only difference we could find between these apps is the content of app.component.html.
Specificly the use of the ion-menu.
If we disable/remove the ion-menu tag in the INBOX app, the white bars are gone.
We also tested this in our own app, and by removing the ion-menu, that seems to get rid of the white bars (but results in a unusable app without navigation…).
Can you confirm if you have the same outcome on your Zebra’s?
Hey @ricardodebeijer,
thank you for your update.
Unfortunately, i cannot confirm your observed behaviour. One of our apps, in which the flickering appears, does not use the ion-menu at all.
We are still in the dark regarding the problem.
Hello,
In our app we face the same issue in a few different cases. On some devices only the status bar and the navigation bar at the bottom are displayed white (while they should be green and black respectively for our app), and on other devices we heard that it was continuously flickering like a strobe light.
Our app is still built on top of the Ionic 3, Cordova 8 versions (unable to upgrade everything yet) and we haven’t updated any ionic or cordova plugin for a year or so. And removing the ion-menu isn’t an option for us.
The Chrome app reset workaround worked for us on many devices as well (went from version 90 back to 69), so it definitely has to do with some newer changes in the WebView implementation of that.
A thing I would like to add is that I’ve also tested this on my own phone (Pixel 3, Android 11) and there I never had this problem in the first place. I noticed that on my phone the Chrome app isn’t used at the system’s WebView, but instead the Android System WebView app is used. So it looks like there is a difference between that one and the Chrome app as well. If I am correct the Android System WebView app is only available for Android 10 or higher.
Our app is used by about 500 Android scanners (Zebra, Honeywell & Datalogic), so I hope to find an easier solution than to reset the Chrome app on all devices, haha.
Thanks for sharing all the information you had found.
Hello @blehmann,
does the error occure on all devices of the different manufacturers or exclusive on Zebra and Honeywell?
We also made the expierence that the problem only exists on Zebra and Honeywell. The problem won’t occure on consumer hardware (Samsung Tablets e.g.). Also android versions 10 and higher are not affected on our side…
I’ve just tested this on a Honeywell (CT40) and a Datalogic (Memor10) scanner we also have here.
- On the Honeywell I do have the issue. On the first start up of our app after a fresh install it went fine, but the 2nd time after I started the app it went wrong.
- On the Datalogic I do not have the issue at all, so there was no need for me to do the Chrome app workaround.
Interesting is that both the Honeywell as the Datalogic scanner are exactly the same (except for manufacturer).
Android: 8.1.0
Chrome: 89.0.4389.105
Both use Chrome as the system’s WebView.
Another thing to note is that through our app itself I can “fix” the white bars as well. Whenever I click on an input field that forces Android to open the on-screen keyboard both the bars get their intended color.
Hello @ricardodebeijer and @blehmann,
we are still expierence this problem on our devices. The workaround is apparently just a short term solution for us. Because of performance problems we need to use a newer version of the web view, but after a few days the problem returns.
Has anyone of you been able to gather new knowledge about the issue?
@blehmann How many Datalogic devices are you using? Are you able to reproduce the problem with a few steps?
Hi @cbinnefeld ,
Yeah we are currently testing it on a production environment with one of our customers. We are waiting for their results and experiences with the work around we made possible. So for now no new insights about this as of now.
We have 1 Datalogic scanner here at the office, but we have several customers using those in production. And so far I’ve heard there are no issues on those kind. The majority of our customers use Zebra / Honeywell, though.
Hi @blehmann,
the workaround you mentioned is the one we already discussed in this thread? Or did you found another one we could also test?
Hello,
The only new knowledge I can share is that updating my Zebra TC56 to the latest 02-32-04.00-OG-U16-STD LifeGuard Release did not help.
We also experienced/know that the workaround I have mentioned is temporary/short term.
For @cbinnefeld: are you also using Ionic 5?
Because we also had this problem in the previous version of our app which was built with Ionic 3.
As @blehmann is still using Ionic 3: do you also have this problem when you use the Ionic 3 Conference example app? (My colleague could reproduce it on there back in October)
Ill downgrade my Ionic CLI and test the Ionic 3 Conference app again to see if it still happens on there as well.
I hope we can find either a Ionic 3 or 5 example app (or other repository) which reproduces the same result on all of our devices (for both Zebra and Honeywell)
From that point we can test options to see if it solves the problem for us all.
We already filed support tickets at Ionic, but they are pointing to the forums as this might be a 3rd party plugin which could be causing it. Also they are not providing support for the open source variant, and we dont have the enterprise version.
They did say : " if you think you’ve found a bug in the Framework itself, please report that here."
But currently I have no clue where the problem is coming from…
Hi @ricardodebeijer,
thanks for your little update. We are on the same boat. We currently suspect the problem on the manufacturer side, but we have no way to reproduce the problem reliable and cannot pin point it to a specific component.
We are currently on @ionic/angular 5.6.0. We will try to reproduce it with an blank ionic example.
Hello,
I tried almost all of the Ionic 3 and Ionic 5 example apps on both my personal phone (OnePlus 6) as well as the Zebra (TC56), here are my findings:
| Example app |
OnePlus 6 |
Zebra TC56 |
Has ion-menu tag |
| I3 conference |
works |
White bars |
yes |
| I3 side menu |
works |
White bars |
yes |
| I5 tabs |
works |
works |
no |
| I5 blank |
works |
works |
no |
| I5 conference |
works |
White bars |
yes |
| I5 side |
works |
White bars |
yes |
| I5 list |
works |
works |
no |
| I5 blank, added ion-menu |
works |
White bars |
yes |
So from my testing, it looks like as soon as there is a ion-menu tag, it breaks.
Please test the above on your devices with an Ionic example app, for example the ‘blank’ app.
@cbinnefeld you mentioned that one of your apps does not use the ion-menu at all, but in that case I am completely in the dark again. But still please test with a Ionic example app.
There needs to be some sort of common factor that all of our apps (and the examples) share…
For your mention of “We currently suspect the problem on the manufacturer side”: we have a Zebra support contract and Ill submit a support ticket there as well, maybe they can help.
But from my testing, seeing that the ion-menu tag changes behaviour, I doubt its a Zebra problem, more likely a Ionic problem (Maybe only in combination with a Zebra or Honeywell device though)
Hello @ricardodebeijer,
I think we found the origin of our problem.
Could you check the android:theme of your MainActivity in the AndroidManifest.xml?
The default value should be android:theme="@android:style/Theme.DeviceDefault.NoActionBar". As far as i know, this is a device specific implementation.
After the changing the the value to android:theme="@android:style/Theme.Translucent" we don’t experience any white bars or flickering.
We try to investigate further, but could you also try out this fix?
1 Like
Hello @cbinnefeld,
If I change that value directly in the platforms\android\app\src\main\AndroidManifest.xml that does seem to do something, at least the bars/flickering is gone after my first test. 
I am now trying to update the config.xml with something like Change android theme from cordova config.xml - Stack Overflow in order to recreate this build from scratch/after platform removal but that is not working yet.
If I can fix that Ill let one of my collegues test on his device too.
Ill keep you posted on our results
Edit:
Adding the following block (with the merge option and the correct path) in our config.xmlworked for updating the AndroidManifest.xml. Ill pass this to my collegue now
<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="@android:style/Theme.Translucent" />
</edit-config>
Hi @ricardodebeijer,
we made a few tests with the android-theme property. It looks like the AppCompat theme implementation (I don’t know how much a manufacturer can alter these) on Zebra Devices in combination with ion-menu (I can’t image why) or EHS results in white bars…
The problem with Theme.Translucent is that all android specific ui elements are getting a not so beautiful style. So this is just a quick fix for us.
Any idea which theme we could use as an alternative? Maybe we could reach out to Zebra with this information.
