question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: Browser status bars not hidden on scroll on mobile and can't zoom

See original GitHub issue

Bug Report

Ionic version:

[x] 4.8.1

Current behavior:

Hi. When deploy my Ionic 4 app on the browser to be used as a normal website, on mobile the browser can’t recognize the scroll of the content. Seems like the page is not scrolling, so for example on iOS the navigation footer and status bar of Safari are not hidden. Same for the other phones. Also, the pinch to zoom doest work

Expected behavior:

The browser has to catch the on scroll event and hide the status bars.

Steps to reproduce:

You can try it on my beta website: https://beta.roomlessrent.com visiting in on mobile

Related code:

You can try it on my beta website: https://beta.roomlessrent.com visiting in on mobile What i just use is, on each page, the <ion-content>, eg:

<ion-content></ion-content>

Other information:

Some problem: https://forum.ionicframework.com/t/ionic-in-web-hide-browser-address-bar/164970/8 Ionic info:


Ionic:

   Ionic CLI                     : 5.2.7
   Ionic Framework               : @ionic/angular 4.8.1
   @angular-devkit/build-angular : 0.803.2
   @angular-devkit/schematics    : 8.3.2
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 7.1.4, browser 5.0.4, ios 4.5.5
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 15 other plugins)

Utility:

   cordova-res : 0.6.0 
   native-run  : 0.2.8 

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.0
   NodeJS     : v10.16.3 (/usr/local/bin/node)
   npm        : 6.11.3
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61



Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
liamdebeasicommented, Oct 4, 2019

Thanks for the issue. Ionic does not do its scrolling on the body, it does it inside of the ion-content. iOS Safari requires scrolling on the body for the header/footer to collapse.

Can you describe the pinch to zoom issue? I tried it out on your website, and it worked fine on my iPhone.

0reactions
ionitron-bot[bot]commented, Nov 3, 2019

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Prevent Address-Bar hiding in mobile Browsers - Stack Overflow
Now your chrome url bar will not hide.It'll stop scrolling. <style type="text/css"> html, body {margin: 0; height: 100%; overflow: hidden} ...
Read more >
Page Zoom-The bottom scroll bar is not displayed ... - GitHub
Hi, yes, the horizontal scrollbar is displayed when the toolbar is hidden. When the toolbar isn't hidden than the scrollbar is not displayed....
Read more >
How to Fix Scroll Bar Is Not Showing in Chrome Error
Can't see the scroll bar in Chrome browser? Here are 9 ways to solve this error so you can browse peacefully again.
Read more >
Fixing that address bar issue in mobile browsers once and for all
Works great for android based phone but for iOS it doesn't solve problem. 2. Always hide the address bar with window.scrollTo(0,1). You've to ......
Read more >
Ionic 4 on browser mobile cannot zoom and cannot hide ...
Hi, I would like to use my Ionic 4 app also for the browser but i cannot zoom on mobile and when scroll...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found