Scrolling past carousel not working in Chrome when using parallax effect

[tou0125]

I have implemented a simple parallax effect via CSS on my hero image. The carousel is below the hero image. When I scroll past the hero image and the cursor is resting on the carousel viewport, the scrolling no longer works, i.e. I can't scroll up or down anymore. When I move the cursor outside the carousel viewport, it works ok. When I remove 'background-attachment: fixed;' from the CSS, the scrolling works. This is only appears to be a problem in Chrome (Version 100.0.4896.127). I am using Fancybox v4.0.26.

Is there something wrong with my implementation?

Please see here: https://codepen.io/sophmek/pen/ZEvggzx