Overflow-x not respected in Safari

Question

I have implemented a mobile slide in menu using CSS and overflow-x: hidden; to hide the menu when translated off-screen. This rule is not respected on Safari on both Mac and iOS, but works perfectly well on Chrome and Firefox on Mac.

I’m not sure if it’s a bug in Safari or a problem with my CSS ruleset. Any input would be appreciated!

Here is my site: https://Finn.lesueur.nz

Does this answer your question? [overflow-x: hidden, is not working in safari](https://stackoverflow.com/questions/32666663/overflow-x-hidden-is-not-working-in-safari) — moath naji, Dec 18 '19 at 10:13
Yes, I had to add `position: relative;` to my html and body tags. I could have sworn I've never needed to do that before! — Finn LeSueur, Dec 18 '19 at 18:55

score 3 · Accepted Answer · answered Dec 18 '19 at 18:57

3

Needed to change the rule to:

html, body {
    overflow-x: hidden;
    position: relative;
}

From this answer linked by moanth maji. Thanks!

answered Dec 18 '19 at 18:57

Finn LeSueur

479
5
18

score 0 · Answer 2 · answered Feb 13 '23 at 15:11

I had the same issue with Mac and Safari but in overflow-y orientation. Only thing that I found that worked on a Mac that had 'hidden content' spilling over was

#elem {
    overflow: hidden;
    overflow-y: -webkit-paged-y;
    height: 200px;
    }

No other platform (including iPhone or iPad) required the overflow-y: -webkit-paged-y; plus a fixed height.

Overflow-x not respected in Safari

2 Answers2