Undesired horizontal scroll on complex lists


#1

On some complex lists chrome does some strange stuff and rounds the presentation width (not the calculated one shown on inspector) up by a pixel, and so the list gets horizontal scrolling where it shouldn’t.

Also, if you start the touch interaction and only move horizontally, you can’t see it happen, but if you start with a vertical scroll and then move horizontally, you’ll see the list goes back and forth by a pixel.

Important to note though that I’m using native scrolling with overflow-x set to false explicitly like this:

<ion-content overflow-scroll="true" overflow-x="false">
    <ion-list>...</ion-list>
</ion-contet>

I was able to fix it with the following override:

[overflow-x="false"] .list {
    overflow-x: hidden;
}

#2

Can you put together a codepen to demo this? Seems like a strange issue