Status bar + notch : is there a way to display status bar with a smooth transition?

1

Is there a way for the statusbar to have smooth transition when showing it in pages with navigation bar? the reason the transition in IOS from pages with full screen no navigation bar to the pages with navigation bars make an unpleasant jump in the page content and it does not look so beautiful for the user experience…

is there a way to fix this ?

for instance some pages need the status bar to show and some others needs to be hidden because it will take the full screen and fill the notch area of iPhone with an image…

I am using the Cordova plugin status bar cordova-plugin-statusbar

in the pages I need to show the status bar I have these:

      pageAfterIn: function(e, page) {
        console.log('pageAfterIn', page);
        app.statusbar.show();
      },
      pageBeforeOut: function(e, page) {
        console.log('pageBeforeOut', page);
        app.statusbar.hide();
      },

the home page by default has the status bar hidden, in app.js I have this:

$(document).on('DOMContentLoaded', function () {
console.log('DOMContentLoaded');
app.statusbar.hide();
});

the issue: the jumping page-content when displaying the Statusbar in some pages I need the navigation bar in iPhone X with notch thing…

Another thing in the Xcode simulator the transitions look very slow performing I hope in the live APP it is not the same thing…

here the video capture in gif showing the problem with the Statusbar showing in those pages I need to fill the notch area of iPhone X:

transition_issue
transition_issue.gif668×600 978 KB

Maybe the solution will be maybe better to set the status bar always hidden and increase the height of the navigation bar when mobile is Iphone X?

.ios.device-iphone-x .navbar~*, .ios.device-iphone-x .navbar~ {
margin-top: 88px; //status bar 44px + 44px height of navigation bar
}

any tips or ideas? thanks

2

Maybe a div like navbar at the top of new page is better

1 Like
3

maybe but I guess… but I am curious to know if there is a way to solve that jumping of the status bar showing when hidden :slight_smile: I guess must be a solution … thanks for your tips!