Hi,

I have the SF-smallscreen plugin enabled and set to have it run based on window width. On an iphone 6 it is not loading correctly. It shows the first submenu items, not formatted nicely and covering much of the screen, until I touch the screen and slightly scroll up. Then it loads the menu correctly, fully collapsed.

Now if I set it to use the smallscreen plugin everywhere by default OR to do it based on user agent, it loads right away without requiring I touch the screen. And it doesn't matter if it is the select or accordion option. So it seems to be related just to having it enabled using the Window Width setting. I've tried changing the width setting too and that doesn't matter.

This does not happen on an iPad mini or any desktop browser window scaled down. Not sure yet if it happens with other phones.

Has anybody else seen anything like this and have any suggestions? I'd like to keep using it with the window width as the criteria for use if at all possible.

Thanks for all your work on this terrific module!

Comments

ajross created an issue. See original summary.

mariem’s picture

mariem
Primary language English
CreditAttribution: mariem commented

I'm seeing the exact same issue on an iPhone 6, using both Safari and Chrome browsers. It doesn't happen on any of the android devices I've tried, or on the iPad mini. I also see some menu items duplicated on the iPhone.

ajross’s picture

ajross CreditAttribution: ajross as a volunteer commented

Ok, I've found if I use a media query (with the same breakpoint I had set for SF-smallscreen) and hide the menus in my theme, it seems to fix things on the iphone. I don't know if this has any implications elsewhere but it seems to work anywhere I test it now. So I did something like this:

@media only screen and (max-width:768px) {
  ul.sf-menu {
    display: none;
  }
}

Still don't know why it happens and is so specific to just the iphone. But hope that helps.

mariem’s picture

mariem
Primary language English
CreditAttribution: mariem commented

Thanks, ajross! That CSS trick worked on my site as well.

LOBsTerr’s picture

LOBsTerr CreditAttribution: LOBsTerr at European Commission and European Union Institutions, Agencies and Bodies commented
Status: Active » Closed (outdated)