Can I Borrow Some Time From Someone with a Mac & iPhone? Safari Debugging Question.

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.

Comments

[Vuild]

Have Mac/iOS.

Can't quite figure out exactly what the problem you are referring to is (read the above). If you can explain it slightly differently or clarify I can test, no prob.

[Jack Harner 🚀]

Sorry for the confusion.

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.

[Vuild]

We can make a time & you can do live updates I'll test in real time for you if you want.

That way you can also look at other possible Safari issues too, if not I can investigate when I get a chance. Up to you.

I have various iPads, iPhones, OSXs, Apple TVs & stuff.