Apple's insitent failure to support `overflow-x: hidden` on the `<html/>` element (alone) in Safari is causing me much grief.
(In Safari 16+ `overflow-x: clip` works as a workaround but that leaves all older versions still affected.)
Long story short, having weighed all other options, I'm forced to add a heavy-handed scroll-event listener that insta-resets any horizontal scrolling on the <html/> element.
💔🍏
Putting `overflow-x: hidden;` on <body/> is the obvious fix, but it has the side-effect of completely preventing the use of `position: sticky` anywhere on the page — a no-go solution.
The only other solution is to make <body/> the page scroll container…
```css
body {
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
```
Which works great until you start working with any 3rd-party script solutions that blindly assume <html/> is the scroll-container, giving lots of borked behavior.
Raw version of the side-scroll prevention script:
```js
if (
navigator.userAgent.indexOf('Chrome') < 0 &&
navigator.userAgent.indexOf('Safari') > 0
) {
document.addEventListener('scroll', function () {
if (document.documentElement.scrollLeft > 0) { document.documentElement.scrollLeft = 0;
}
});
}
```
Már Örlygsson :nerd: