Hi everyone,
I’m encountering an issue with a video container on my Webflow project. The container in the hero section has embedded videos that are supposed to increment on scroll before unlocking scrolling towards the rest of the page. This works perfectly on all browsers (including safari on iOS) except for Safari on macOS. When hovering over the iframe in Safari, scrolling just scrolls down the page and doesn’t trigger the video increment as expected.
Here is the read-only link to the page:
https://preview.webflow.com/preview/smaac?utm_medium=preview_link&utm_source=designer&utm_content=smaac&preview=3a5232d94095a8a222dc9b183a8c4a18&pageId=669fbcfcf601376bd56d673f&workflow=preview
In the section-hero div, I have a lot of custom code embeds. The first contains the logic and events for scrolling and incrementing the video, (the second is a general function for loading the right video from a text string). Note: These codes are only editable via the navigator panel.
The videos are loaded within the CMS collection for featured projects. The custom code is found in the div “project-card-4-media-thumbnail-wrapper”. It makes an iframe and loads the vimeo videos within. I’m not using the traditional vimeo API approach as it results in a lot of broken or frozen videos. All containers wrapping the iframe have the property events:none.
The problem seems related to hovering on the iframe (I’ve tried removing anything else but the bug only gets solved if I delete the entire iframe), but I’m not sure why it only affects Safari on macOS. Any insights and solutions would be greatly appreciated!
Thanks in advance!
Best regards,
Rick