awwester awwester - 4 months ago 27
CSS Question

side scrolling not working on android

I have an issue with my application where side scrolling is not working on Android, but it works fine in browser and in ios.

I have multiple rows that you can select drink options. The user scrolls through the options and chooses 1. If you want a visual representation to get a better idea, https://cloudup.com/cOpnPk5zXnR

In browser and ios, you can scroll through and pick one, but in android it opens up the side menu without scrolling through the options, https://cloudup.com/cKPwT8zhtZK

Here is a skimmed down example of what I'm doing.

<ion-content>
<ion-scroll direction="x">
<div class="row">
<div style="min-width:35%;">hello</div>
<div style="min-width:35%;">this</div>
<div style="min-width:35%;">should</div>
<div style="min-width:35%;">be</div>
<div style="min-width:35%;">scrollable</div>
</div>
</ion-scroll>
</ion-content>


One clue I've found is that if you apply
overflow-x: hidden;
to the .row, it acts like it does in android. Maybe ionic is adding something to android with ion-scroll that has a bug side-effect, but I can't seem to find anything on that.

Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 1.2.4
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.5
ios-sim version: 5.0.7
OS: Mac OS X El Capitan
Node Version: v5.10.1
Xcode version: Xcode 7.3 Build version 7D175

Answer

Found the answer on a github issue. putting overflow-scroll="false" on the ion-scroll element worked.

Comments