Ionic-framework: ion-content scrollbar issue on Android

Created on 8 Jan 2016 · 47Comments · Source: ionic-team/ionic-framework

I just have setup a basic side menu app from the template, and have a strange issue only on Android: there is content overflow which cause a scrollbar and obviously enable scrolling, where it should not.

Here is a screen from ionic serve --lab (the issue is replicated on real device):

When I look at the HTML, it see an extra <div class="scroll">...</div> under the <ion-content> directive, that is not there on the iOS version. It seems the issue lies with this extra div, as it is offset of about 10px from the top of the ion-content box and the overflowing content that cause the scroll is the same size.

The issue is present in version 1.2.4.

Source

sinedied

Most helpful comment

I'm also seeing this issue with the v2 beta. Not sure what happened, it didn't start out that way.

racecarparts on 24 May 2016

👍2

All 47 comments

Yea the native scroll view area is more sensitive to overflows and such. And you must have a mouse connected so you're seeing it. Will be fixed in a later release with flexbox sizing.

mlynch on 8 Jan 2016

What kind of workaround has been found?

overflow-scroll="false" seems to work for now...

MT-- on 15 Feb 2016

Setting the following works for me. Which is the same as a global overflow-scroll="false":
$ionicConfigProvider.scrolling.jsScrolling(true);

jclalala on 18 Feb 2016

This is not really a workaround, as it completely disable scrolling, which is not desired in my case.

sinedied on 18 Feb 2016

Actually have the same issue where scrollbar is shown, even if there is no data to scroll. I am using Ionic, v1.2.4 for my application. I am running it on the real device.

Is there any solution for this as it looks bad on the mobile phone.

shashankdevp on 26 Feb 2016

Hello,

I am having the same issue. Just installed from sidemenu template and I am getting this scroll bar on the Android side.

Are there any workarounds?

Is it coming from the template? How to solve this? I am using ionic version 1.7.14

Thanks,

DeeM297 on 25 Mar 2016

My scroll bar disappeared!!

So the solution I found is to rename my _"index.html"_ to _"main.html"_ and create a new _"index.html"_ with the following code.
<!doctype html>
<html>
<head>
<title>the title</title>
<script>
window.location='./main.html';
</script>
<body>
</body>
</html>

DeeM297 on 2 Apr 2016

👎4

Hi the solution fro this is

/* FIX scroll issue */
.overflow-scroll {
  overflow-y: auto;
}

cesar-oyarzun-m on 13 Apr 2016

Hello all! I am unfortunately having an issue reproducing this issue. Can somebody make a codepen or plunkr that reproduces this issue? Thanks! Also, heres what my test looks like:
screen shot 2016-04-13 at 4 13 59 pm

jgw96 on 13 Apr 2016

Is the content view on the right scrollable? As it should not.
What's your browser?

If you use Safari, it does not show scrollbars, so the issue with not be visible at a glance like this, but with Chrome your should reproduce the same behavior I posted.

sinedied on 14 Apr 2016

Hey @sinedied ! Thanks for getting back to me. So no, neither of the views are scrollable and I'm using the latest chrome canary. Your using chrome too I'm guessing?

jgw96 on 14 Apr 2016

Yes, the original screen shot was made on chrome.
I will put a codepen for you in a few days (I'm taking some days off ;) )

sinedied on 14 Apr 2016

No problem and thanks! I would love to be able to solve the issue, but it's kinda hard to when I can't reproduce it haha (: so a codepen demonstrating the issue would be great.

jgw96 on 14 Apr 2016

Oh and also, I tried on my Android devices (Nexus 6, Nexus 7 and a moto x 2014) and could not reproduce there either

jgw96 on 14 Apr 2016

@jgw96 what version of ionic you're testing, also did you check the DOM if you have the <div class='sroll'>

cesar-oyarzun-m on 14 Apr 2016

I'm new to ionic and am running into the same issue. When running ionic serve -l, ios looks fine but android has the scroll bar greyed out on the content area. If it helps at all, it seems if I remove the overflow-scroll class using chrome dev tools, it appears that it resolves the issue, but I don't know if there are unintended consequences by doing so?

<ion-content class="has-header has-tabs pane scroll-content ionic-scroll overflow-scroll" data-tap-disabled="true" nav-view="active" style="transform: translate3d(0%, 0px, 0px);"> <div class="scroll"> <ui-gmap-google-map ......> </div> </ion-content>

I can try and create a codepen if that would be of more use.

brnewby602 on 14 Apr 2016

@cesar-oyarzun-m I am using ionic 1.2.4 and i do see the <div class="scroll"> in my dom. I still cannot seem to reproduce the issue though. Im using chrome canary which is chrome version 52 and is two version ahead of chrome stable.
screen shot 2016-04-14 at 11 12 01 am

jgw96 on 14 Apr 2016

@brnewby602 It would be awesome if you could create a plunker or a codepen! Here is a plunker you can use as a template: http://plnkr.co/edit/jnOrQRtE8rN2WCXDQYQY?p=info

jgw96 on 14 Apr 2016

@jgw96 I think you need to try on real device I think maybe they have different chrome renders.

cesar-oyarzun-m on 14 Apr 2016

@cesar-oyarzun-m I have tried on three different Android devices (Nexus 6 running the Androd N dev preview, Nexus 7 2013 running Android 6.0.1 and a Moto X 2014 running Android 5.1) and unfortunately could not reproduce the issue on any of my devices. Could you make a plunker that shows the issue that i can use to reproduce the issue?

jgw96 on 14 Apr 2016

@jgw96 Trying to get a plunkr that actually renders a live preview. If I get it working I'll add the link

brnewby602 on 14 Apr 2016

@brnewby602 here is a template i made you can use to make your plunker: http://plnkr.co/edit/jnOrQRtE8rN2WCXDQYQY?p=info

jgw96 on 14 Apr 2016

Hello! Gonna go ahead and close this issue for now, as i cant seem to reproduce it, but if you get together a plunkr that reproduces that ill happily reopen. Thanks again!

jgw96 on 19 Apr 2016

I can still reproduce it using my starter kit: https://github.com/angular-starter-kit/starter-kit/tree/mobile

I'll try to reproduce it in your plunker.

EDIT: Here it is: http://plnkr.co/edit/Ls4Hi0hcqN9trABBkwGT?p=info

Run it with chrome dev tools / Android mode, and you'll see that you can scroll down the home page content where it should not.

sinedied on 19 Apr 2016

@jgw96 hi there, try it on Android 5.0 or older version like 4.4, you can see the issue.

GitGump on 12 May 2016

Hello @GitGump ! Ive tried it on Android 5.1, 6.0.1 and the Android N Dev preview and couldn't seem to reproduce it. Can you still reproduce this issue? Even with 1.3.0?

jgw96 on 12 May 2016

@jgw96 Yeah! And it seems that the issue can reproduce only on older Android versions(4.4.2 or older), I updated ionic to 1.2.4 recently and got this problem.

GitGump on 13 May 2016

👍2

I use android kitkat and I can reproduce the issue

neslinesli93 on 18 May 2016

Same for me, it started with Ionic 1.2.x

stjerntind on 19 May 2016

I'm also seeing this issue with the v2 beta. Not sure what happened, it didn't start out that way.

racecarparts on 24 May 2016

👍2

@wheelertom What version of Android are you seeing this on?

jgw96 on 24 May 2016

@jgw96 -- I haven't been able to get my Android emulator working. I'm only seeing this in the browser view. In the iOS emulator it's not a problem.

racecarparts on 27 May 2016

@wheelertom I am currently testing on a Nexus 7 running Android 6.0.1, a Moto X 2014 running Android 5.1.1 and a Nexus 6 running the Android N beta.3 dev preview and i cant seem to reproduce this issue with any of my Ionic 2 beta.7 apps. Could you post a plunker that i could use to reproduce this issue? Thanks for using Ionic!

jgw96 on 27 May 2016

Are you planning to look into a fix for the v1, or will this be only fixed in v2?

sinedied on 29 May 2016

@jgw96 This issue only affects Android < 5 as far as I can say from my tests. On modern devices (which you test on) you'll not see it.

stjerntind on 30 May 2016

I experience the same issue. It happens on Android 4.4.2 (devices tested: samsung galaxy s4, samsung tab 3) and on android 5.0 (devices tested: lenovo tablet).

reekhof on 8 Jun 2016

I can reproduce this using Ionic 1.7.14 with genymotion emulator with Android 4.4.4 and 5.0. Will you fix it on Ionic 1?

pas on 24 Jun 2016

I am using ionic 1.7.15, unfortunately I am experiencing the same issue and any of the above workaround seems not working at all. I am using browser with Chrome Version 51.0.2704.103 m (64-bit), and I am also using Visual Studio 2015 and Ripple emulator. Any progress to resolve the issue?

bob1457 on 2 Jul 2016

This issue is quite obvious and has been around for quite some time now. I run my app on Android 4.4.2 and face the scrollbar issue whether it is ionic 1 or 2. Note that on Android 5> or iOS, this does not happen. Nonetheless, android 4.4 still make up a majority of user base (30% up I think) so please take a look at this issue.

woraphol-j on 9 Jul 2016

The latest Visual Studio templates show this both with the emulator and a real android device.

Microsoft Visual Studio Community 2015
Version 14.0.25422.01 Update 3
Ionic Pack 1.0.20

lightbeard on 21 Jul 2016

Same for me (Android 4.4.2)

mangotroph on 18 Oct 2016

👎1

👍 +1
Still Happening in android 4.4.2.

Annoying :(

martinlombana on 5 Nov 2016

👎1

+1
Using Android 4.4.4 and also facing this issue.

rafaelcamargo on 3 Dec 2016

👎1

+1 Still Happening :(

zarkiel on 10 Dec 2016

👎1

Still Happening. For every view.
Android 4.4.4

ceciliassis on 13 Dec 2016

👎1

+1 Still Happening

balicekt on 6 May 2017

👎1

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.