Slidebox and Ionic content in IE + touchscreen

ionic-v1
1

Hello every body,

I’m using Ionic for my app. I have got a page where I need to scroll from the top to the bottom in a long page (let’s say it’s a long article) and I want to browse other articles by swiping left and right to open them (like in a gallery).

To do so, I have used ion-slide-box with multiple slides. Each of this slides contains a ion-content in which the long element is.

Everything was working fine and then I’ve started to test it in Internet Explorer.

If I use the mouse, everything works fine but as soon as I used a touch screen, it seems that if the ion-content is scrollable, the swipe event (that is an horizontal swipe) is not passed to the slide-box so the screen don’t move.

I have created a codepen here. To reproduce my issue, you have to open it in IE and use it with a touchscreen. You will see that the behaviour is not the same if you use the mouse or if you use the finger.

It’s not the case here but I’ve also noticed that everything works fine if the content of the ion-content fits in its parent which means if the ion-content can not scroll.

2

Okay,

I will respond to my self, the solution seems to add the following style rules :
ion-content { touch-action: pan-y; }

3

Hi drunc,

Where did you add that style configuration? Can you give a code example?

4

Hi,

I add it to my general style sheet so it’s applied to all the ion-content in my app but I assume that if you add it directly in your DOM where the problem is, it should also work.

<ion-slide-box style="height: 100%; background: red;" does-continue="true">
    <ion-slide>
      <ion-content style="touch-action: pan-y;">
        <div class="box blue"><h1>Height: 100%</h1></div>
      </ion-content>
    </ion-slide>
...

I’m sorry but I hav’nt any touch device right now so I can’t give a code example that I’ve tested but I hope it helps you anyway.