White screen on rotate

image
Does anyone know how to get rid of this. (White screen on rotate)
https://app.box.com/s/7mdjnihkbz9gwfjrzictu5kh3q7c5ggz
Only happens on Android phones, tested with Note 4(Android 5.0), Galaxy S5, Moto G.
This happens with every ionic/cordova sample codes.
Ionic Version : “1.0.0”
Cordova : 3.6.4

If a scroll resize fixes it you could add

   window.addEventListener("orientationchange", function() {
        $ionicScrollDelegate.resize(); 
      }, false);

on your .run.

Thanks for your response. But this didn’t work for me.
Find below my run script:

.run(function($ionicPlatform, $ionicScrollDelegate) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }
        window.addEventListener("orientationchange", function() {
            $ionicScrollDelegate.resize(); 
        }, false);
    });
})

I also noticed that the issue somewhat has something to do with the body tag, because if I change the background color to say “yellow”, the white area changes to yellow on rotate.

Any thoughts?

Worst case scenario, you need to do a reload on orientation change. Is that an image? Does that happen in any type of view, even with only text? If its an image you could try to redraw it, if the problem persist with only text I wouldn’t know how to help.

Sorry for the late response, I was out of town.
Issue still persists even with reloading and it happens with or without images even with texts. Thanks for the suggestions btw.

I am also facing the same issue. Some how this issue is related to some loading issue of UI. If I give background-color=“Red” to body tag then on screen rotation the red colour appears.

Please let us know if you find any solution over it.

Thank You.

Same thing I’ve been experiencing for weeks. I get a blue screen on rotation and startup. That’s a bummer

i confirm this bug, i still have this problem it gave me a headache for the last 8 months.

Anybody has resolved this bug?
Ionic guru @mhartington may you help to us?

Hmm, I’m not able to replicate. Does anyone have a demo that I can look at.
Also, it is worth noting that the version originally provided are rather old. Please test the latest bits and see if that resolves the issue.

Thank you eivanov for sharing this demo.
I am also facing the same problem. As mentioned by keljims the colour which we see on device rotation is of body tag.

Thanks for the demo. I’m still not able to replicate this issue at all.

Hi mhartington,

I have not tries on IOS but on android. On browser(chrome) I select nexus 7 as the device ( inspect and select mobile and select nexus ).

I am using ionic build on nexus 7 and in that app also I am facing this prooblem. I have never tried this on IOS.

Thank You.

Hmm still not able to reproduce the issue.

Hello Mike,

I saw your video. When you rotate that screen there appears a white screen
for some micro seconds. This screen causes some more delay in app.

You can colour your body tag as red or yellow and that white screen will
now appear as yellow or red.

Thank you for your immense support. I hope now you will resolve this issue
soon.

Thank You.

Swapnil Kate

That is to be expected. It takes some time for the browser to repaint the entire screen on rotation. There’s nothing that ionic can do about this.

Thank you Mike. We thought there may be something which we can put for it as on mobile device the time of this flicker is bit high and causes a significant lag in reprinting this image.

Thanks a lot for clearing this doubt.

Thanks Mike. I guess that this is no solution, but there was hope.
I set a body color is the same as the app’s content background as a solution.