Trackpad scroll doesn't work inside Ionic React

[rossrossp]

Describe the bug I've got a bit of a strange one here, and I'm not sure if it's a Lenis issue or an Ionic issue, so I'm posting here to see if anyone can point me in the right direction.

I am trying to set up Lenis to fix a jittery scrolling issue observed when using React Three Fiber/Drei scrolling View (https://github.com/pmndrs/drei/issues/1890). I have got this to work, and it fixes the issue, only if my React page is not wrapped in an IonPage/IonContent, as recommended by Ionic. Scrolling by dragging works with IonPage/IonContent, as long as Lenis's syncTouch is disabled, but scrolling with the trackpad doesn't work, and no scrolling works if syncTouch is enabled.

To Reproduce For instance, this works:

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Canvas, addEffect } from "@react-three/fiber";
import { View, PerspectiveCamera, Environment } from "@react-three/drei";

import Lenis from '@studio-freight/lenis'

const lenis = new Lenis({ syncTouch: true })
addEffect((t) => lenis.raf(t))

const cameraPosition = 0.55

const List: React.FC = () => {
	const [items, setItems] = useState<number[]>([])

	const loadItems = async () => {
		setItems([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12])
	}

  	return (
		<>
			<div className="grid grid-cols-2 gap-2 p-4" style={{ position: 'relative', width: '100%', height: '100%' }}>
			{items.map((item, index) => (
					<div className="flex flex-col h-60" key={"b" + index}>
						<Link to={"/detail/"+item.id} className="w-full h-full overflow-hidden">
							<View className={`w-full h-full `}>
								<PerspectiveCamera makeDefault fov={43} position={[0, cameraPosition, 4]} rotation={[0, 0, 0]} />
								<directionalLight castShadow position={[6, 10, 10]} intensity={2.5} shadow-mapSize-width={1024} shadow-mapSize-height={1024} shadow-camera-far={50} shadow-camera-left={-10} shadow-camera-right={10} shadow-camera-top={10} shadow-camera-bottom={-10} />
								<ambientLight intensity={0.75} />
								<mesh receiveShadow rotation={[-Math.PI / 2, 0, 0]} position={[0, -cameraPosition, 0]}>
									<planeGeometry args={[20, 20]} />
									<shadowMaterial attach="material" opacity={item.type === 1 ? 0.025 : 0.15} />
								</mesh>
								<Environment preset="night" />
							</View>
						</Link>
						<div className="text-center">
							<h1 className={`text-xl text-text`}>
								{item}
							</h1>
						</div>
					</div>
				))}
			</div>
			<Canvas
				shadows
				style={{
					position: "fixed",
					top: 0,
					bottom: 0,
					left: 0,
					right: 0,
					overflow: "hidden",
				}}
				eventSource={document.getElementById("root")!} >
				<View.Port />
			</Canvas>
		</>
  	);
};

but this does not:

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Canvas, addEffect } from "@react-three/fiber";
import { View, PerspectiveCamera, Environment } from "@react-three/drei";
import Lenis from '@studio-freight/lenis'
import { IonContent, IonPage } from "@ionic/react";

const lenis = new Lenis({ syncTouch: true })
addEffect((t) => lenis.raf(t))

const cameraPosition = 0.55

const List: React.FC = () => {
	const [items, setItems] = useState<number[]>([])

	const loadItems = async () => {
		setItems([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12])
	}

  	return (
		<IonPage>
			<IonContent>
				<div className="grid grid-cols-2 gap-2 p-4" style={{ position: 'relative', width: '100%', height: '100%' }}>
				{items.map((item, index) => (
						<div className="flex flex-col h-60" key={"b" + index}>
							<Link to={"/detail/"+item.id} className="w-full h-full overflow-hidden">
								<View className={`w-full h-full `}>
									<PerspectiveCamera makeDefault fov={43} position={[0, cameraPosition, 4]} rotation={[0, 0, 0]} />
									<directionalLight castShadow position={[6, 10, 10]} intensity={2.5} shadow-mapSize-width={1024} shadow-mapSize-height={1024} shadow-camera-far={50} shadow-camera-left={-10} shadow-camera-right={10} shadow-camera-top={10} shadow-camera-bottom={-10} />
									<ambientLight intensity={0.75} />
									<mesh receiveShadow rotation={[-Math.PI / 2, 0, 0]} position={[0, -cameraPosition, 0]}>
										<planeGeometry args={[20, 20]} />
										<shadowMaterial attach="material" opacity={item.type === 1 ? 0.025 : 0.15} />
									</mesh>
									<Environment preset="night" />
								</View>
							</Link>
							<div className="text-center">
								<h1 className={`text-xl text-text`}>
									{item}
								</h1>
							</div>
						</div>
					))}
				</div>
				<Canvas
					shadows
					style={{
						position: "fixed",
						top: 0,
						bottom: 0,
						left: 0,
						right: 0,
						overflow: "hidden",
					}}
					eventSource={document.getElementById("root")!} >
					<View.Port />
				</Canvas>
			</IonContent>
		</IonPage>
  	);
};

Hopefully somebody knows what's happening here. I appreciate your help in advance!