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 2 · Accepted Answer · answered Dec 18 '19 at 18:57

2

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

447
5
16

Overflow-x not respected in Safari

1 Answers1