Search code examples
ioscsssafarimargin

Full width menu with negative margin gives infinite horizontal scroll on safari and ios

I have a site where I have a full width menu, which has negative margins. It works perfect, except on Safari/iOS.

On Safari/iOS I can scroll horizontaly forever....WHY?

 background-color: #0a6e96;
 margin: -1px -9999rem;
 padding: 1.2rem 9999rem;
 margin-top: 48px;

Update - Solution

https://css-tricks.com/full-browser-width-bars/

This link has multiple solutions.

Solution

  • To avoid triggering horizontal scrolling, you need to set overflow-x:hidden on both the html and body elements.