Hi Dev,

I'm trying to figure out this weird bug that only happens in, as far as I can tell, iOS Safari. Please see attached Gif:

I don't have access to a Mac, so I'm kind of shooting in the dark without Safari devTools. The biggest thing that's weird is that the menu works as expected when viewed in Landscape, but when you flip back to portrait it lingers for a second before flipping over to the mobile styles.

As far as I can tell it has to do with the overflow-x: scroll; but without being on a Mac, it's hard to tell.

Nav In Question

Any suggestions or help would be appreciated!

Edited for clarification:

My issue is that when you click on an item (.mainNav-item) in the Main Nav (.mainNav) the drop down menu (.mainNav-subMenu) is displaying but not overflowing. The JS is working to add the is-open class to .mainNav-subMenu because (it's hard to tell from the gif) the drop down's drop shadow is displaying.

The even weirder part is that when you flip from portrait to landscape mode, the issue goes away and the .mainNav-subMenu displays as it's supposed to.

The only Mobile Specific SCSS I have for the menu is:

// MobileStyle mixin to add max-width media query
@include mobileStyles() {

    nav.mainNav {
        width: 100vw;

        .mainNav-list {
            overflow-x: scroll;
            flex-wrap: nowrap;
        }

        .mainNav-item {
            flex: 1 0 auto;
        }
    }

} 

and when I take off the overflow-x: scroll the menus display as expected, but now make the page way wider than the screen.