Flexbox/CSS grid breaking functionality?

[Fergie77]

Been having some issues whenever I put a slider inside a layout div to put text off to the side, using either flexbox or CSS grid. The whole page seems to scroll? Only seems to happen with a trackpad on a laptop. Also the images clip in almost like they're lazy loading but I don't think I have it set to that

https://hanson-of-sonoma.webflow.io/slider-issue

[jamesli2021]

Are there error you need to resolve?

TypeError: document.querySelector(...) is null

[Fergie77]

Are there error you need to resolve?

TypeError: document.querySelector(...) is null

Yea just fixed that there but it wasn't what's causing the problem, at least I don't think so?

[Fergie77]

It seems like using flexbox or grid almost always breaks the slider, even if its a parent element of the slider itself

[Fergie77]

@rcbyr Any ideas what this could be?

[Fergie77]

If anyone else has come across this issue, I solved it by using column elements rather than flexbox/css grid to position everything

[kbachl]

@Fergie77 can you please give more details?

Im currently having a pain with the slider as that on iOS devices the first tap to any element below the slider is ignored. If I tap anywhere on the page before it works however. Removing the slider js initialization code immediately resolves this issue, yet we need the slider