CODEWITHSUNDEEP
css
Finn LeSueur
Finn LeSueur

Reputation: 529

Overflow-x not respected in Safari

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

Upvotes: 2

Views: 2177

Answers (2)

Robert Yeomans
Robert Yeomans

Reputation: 376

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.

Upvotes: 0

Finn LeSueur
Finn LeSueur

Reputation: 529

Needed to change the rule to:

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

From this answer linked by moanth maji. Thanks!

Upvotes: 5

Related Questions