Ion Slider vertical scroll not working in IOS

Ionic Framework Ionic React
1

I have an IonSlide component that contains three sliders. Each of those 3 sliders contain an array of objects that is mapped over and rendered as components.

While running the app in the IOS simulator via xcode, I am experiencing extremely buggy behavior where sometimes the vertical scroll does not work. Click events, horizontal scrolling and other events don’t seem to be an issue, but when loading in the page sometimes I cannot scroll vertically. Or when switching to a new slide sometimes I cannot scroll vertically.

This happens probably 60% of the time, and I do not have the issue when testing inside my desktop browser. I also notice it if I open up safari on the simulator and navigate to my Ionic app that way.

Has anyone experienced this issue? I have tried playing around with setting a height to the slider, a height to the containers, and also overflow CSS.

Here is my basic structure:

const slideOpts = {
  initialSlide: 0,
  longSwipes: false,
};

<IonPage>
  <IonContent
      id="main-content"
      fullscreen
    >
       <IonSlides
          pager={false}
          options={slideOpts}
          ref={loanDetailsSlide}
          onIonSlideWillChange={e => getIndex(e)}
        >
          <IonSlide>
            <CarsWrapper>
              {state.carsOwned.map(
                (
                  cat: { category: string; cars: Array<Car> },
                  index: number
                ) => {
                  return (
                    <div key={cat.category + index}>
                      <h2>{cat.category}</h2>
                      {cat.cars.map((car, carIndex) => {
                        return (
                          <CarCard
                            cardType={cat.category}
                            carName={car.name}
                            carDescription={car.description}
                            key={car.name + carIndex}
                            onClick={() =>
                              console.log("test")
                            }
                          />
                        );
                      })}
                    </div>
                  );
                }
              )}
            </CarsWrapper>
          </IonSlide>
          <IonSlide>
            <CarsWrapper>
              {state.carsDriven.map(
                (
                  cat: { category: string; cars: Array<Car> },
                  index: number
                ) => {
                  return (
                    <div key={cat.category + index}>
                      <h2>{cat.category}</h2>
                      {cat.cars.map((car, carIndex) => {
                        return (
                          <CarCard
                            cardType={cat.category}
                            carName={car.name}
                            carDescription={car.description}
                            key={car.name + carIndex}
                            onClick={() =>
                              console.log("test")
                            }
                          />
                        );
                      })}
                    </div>
                  );
                }
              )}
            </CarsWrapper>
          </IonSlide>
          <IonSlide>
            <CarsWrapper>
              {state.carsRented.map(
                (
                  cat: { category: string; cars: Array<Car> },
                  index: number
                ) => {
                  return (
                    <div key={cat.category + index}>
                      <h2>{cat.category}</h2>
                      {cat.cars.map((car, carIndex) => {
                        return (
                          <CarCard
                            cardType={cat.category}
                            carName={car.name}
                            carDescription={car.description}
                            key={car.name + carIndex}
                            onClick={() =>
                              console.log("test")
                            }
                          />
                        );
                      })}
                    </div>
                  );
                }
              )}
            </CarsWrapper>
          </IonSlide>
        </IonSlides>
  </IonContent>
</IonPage>```
2

SOLVED:

I added a threshold to the slideOpts

My theory is that it was detecting a slight horizontal scroll. New Options look like this and I am not experiencing any issues with vertical scrolling content anymore:

  const slideOpts = {
    initialSlide: 0,
    longSwipes: false,
    threshold: 10,
  };