Safari - Carousel overflow causes width of landing page to stretch right

In Safari, the carousel content extends many times beyond the width of the page, allowing for scrolling very far to the right. Here's a screenshot:

This appears to be because the carousel, which is composed of <li> elements that are assigned a width of 20% of the container, add up to a value far greater than 100%, and overflow is not contained on their parent element. I was able to resolve this by applying overflow-x: hidden; to the 'grandparent' carousel element (not the <ul> element, but its parent). Here's a screenshot:

I'm on Version 14.0.1 (16610.2.11.51.8) of Safari, on macOS Big Sur. Hope this helps!

Thanks, I'll see if someone can look into this.

@kcin said:

In Safari, the carousel content extends many times beyond the width of the page, allowing for scrolling very far to the right. Here's a screenshot:

This appears to be because the carousel, which is composed of <li> elements that are assigned a width of 20% of the container, add up to a value far greater than 100%, and overflow is not contained on their parent element. I was able to resolve this by applying overflow-x: hidden; to the 'grandparent' carousel element (not the <ul> element, but its parent). Here's a screenshot:

I'm on Version 14.0.1 (16610.2.11.51.8) of Safari, on macOS Big Sur. Hope this helps!