Odd behavior with horizontal overflow on safari/webkit ...

At a glance

The community member is experiencing a horizontal overflow issue on their website, which only affects browsers using the Safari/WebKit engine (Safari on Mac, Safari/Chrome on iOS). The issue occurs when toggling the mobile menu (using the Radix sheet component) on and off. Lowering the opacity of the sheet overlay resolves the issue, but the problem returns when the sheet is closed. The community member suspects the issue may be related to the 5% horizontal padding on the parent container of the carousel, combined with the 100vw on the carousel, but is unsure why this is not an issue on Chrome-based browsers.

The comments suggest that the open sheet is hiding the overflow on the page, and the issue may not be related to the sheet itself. Another community member mentions seeing the horizontal scrollbar in Chrome as well.

There is no explicitly marked answer in the provided information.

Useful resources

aashishdhngr

The issue seems to only affect browsers using the safari/webkit engine -Safari on Mac, Safari/Chrome on IOS

I have a container with a looping carousel which extends the full width of the page. On initial load on a mobile/tablet, the page renders exactly as desired - no horizontal overflow issues.

However, when toggling the mobile menu (using the Radix sheet component) on and off, the horizontal overflow issue shows up.

While troubleshooting the issue, I lowered the opacity of the sheet overlay only to find out the issue disappears when the sheet is active, and returns when the sheet is closed.

Here is the link to the website - https://imp-rentals-6vgj1.wstd.io/
Here is the link to the builder - https://apps.webstudio.is/builder/c4b0aacc-ba6e-4cbb-998d-5dde2361f039?authToken=39ec4cd9-bd6a-464b-a2e5-ad6a8bb6564d

(The parent container of the carousel does have a 5% horizontal padding, so I'm assuming this combined with the 100vw on the carousel is part of the issue, however, I'm not sure why this is a non issue on chrome based browsers....)

4 comments

OOleg Isonen

open sheet is hiding overflow on the page, problem hasprobably nothing to do with the sheet

OOleg Isonen

I can see horizontal scrollbar in chrome too

OOleg Isonen

Attachment

OOleg Isonen

easierst way to debug is toggle the show/eye off until you see its gone

Add a reply

Join the Webstudio community

Odd behavior with horizontal overflow on safari/webkit when toggling Radix sheet.