Problem with menu on IPhone

[suhaenni]

Dear adgsm
I am struggling with menu display on IPhone.

Instead of pushing content to the right and displaying menu, content gets minimized and menu gets displayed beside my content (see screenshot below or on www.compasso.ch). This happens since I have meta tag viewport set to content="width=320"

Do you have an idea how I can get this working?

[adgsm]

I do not have iPhone to test it but will try it on iPad this afternoon...
What exactly do you want to achieve? Menu, by default, is supposed to push content (looks like it did basing on your screenshot...)
Would it be possible for you to post code piece that shows how you implemented the menu?

[suhaenni]

Hi, thanks for fast response
On IPad we display normal website, not mobile menu, but I did set up a separate site with same content for you to test with IPad.
Please go to http://tinyurl.com/ojzeowm to test on IPad

What I want to achieve is the default behaviour as you say: pushing content out of viewport to show menu in original size (see below). You can see how it is supposed to be also on Android or Windows phone

[adgsm]

I've just tried it in Safari on Mac and it seems to push content (containing "Compasso...") to the right.

I'll try it on iPad in the afternoon as well...

[suhaenni]

Sorry, my testingpage is not set up fully yet, give me half an hour....

On Safari in IPhone mode it works well here too, only on real IPhone it flaps.

[suhaenni]

This is my initialization script:

<script language="JavaScript" type="text/javascript">       
$(document).ready(function(){ 

                $('#menu').show();//menu hidden on start with CSS to avoid flickering
            $('#menu').multilevelpushmenu({
                            containersToPush: [$( '#wrapper_page' )],
                            mode: 'cover',
                            backText: 'Zurück',
                            fullCollapse: true, // Menu starts closed
                            collapsed: true, 
                            preventItemClick: false,  //wird benötigt, damit Link-Klick funktioniert                                  
                            preventGroupItemClick: true,   //wird benötigt, damit Link-Klick funktioniert 
                            menuWidth: '250px',
                            menuHeight: '4000px',

                            onGroupItemClick: function() {
                                var clicked_item = arguments[0].target.localName;
                                var menu_level = arguments[1];
                                console.log(arguments[0].currentTarget.className);
                                // folgende Aktionen nur ausführen, wenn nicht Pfeil gedrückt wurde und wenn nicht der Link "more" oder das entsprechende li geklickt wurde
                                // perform actions if not arrow has been clicked and if not class "nofollow"
                                if(clicked_item != "i" & arguments[0].target.parentElement.id != "more_link" & arguments[0].currentTarget.id != "more_link" & arguments[0].currentTarget.className != "nofollow")

                                {                                                                                   
                                    //auf aktuellem Level bleiben
                                    //stay on actual level
                                    $('#menu').multilevelpushmenu('collapse',menu_level);
                                    // Anchor href
                                    var itemHref = arguments[2].find('a:first').attr('href'); 
                                    // Redirecting the page
                                    location.href = itemHref;                                                                                                                                                                                                                                                   }               
                                }       
            });



                // language inks
                $( '.lang a' ).click(function(){
                    window.location.href = $(this).attr('href');
            });


                // Menu collapse
                $( '#back_home' ).click(function(){
                    $('#menu').multilevelpushmenu('collapse');
                });


                // Full collapse
                $( '#fullcollapse' ).click(function(){
                    $( '#menu' ).multilevelpushmenu( 'collapse' );
                });

                // Base expand
                $( '#baseexpand' ).click(function(){
                    $( '#menu' ).multilevelpushmenu( 'expand' );
                });

    }); 

</script>

[adgsm]

What style/CSS you have applied to #wrapper_page?

[suhaenni]

position: absolute;
background-repeat: no-repeat;
padding-bottom: 0px;
width: 320px;

[adgsm]

I'll have to check it latter in the afternoon on iOS/iPad (I don't have it with me in the office right now...). Basing on above mentioned it looks like #wrapper_page is not being pushed but squeezed...

[suhaenni]

yes, that seems to be the case.
I did put now the HTML code from your original files into the menu on Testpage to make sure it is not any problem with the HTML Code.

[suhaenni]

I did put now almost everything back to original and have still the error, thus I think it is
the meta tag viewport set to content="width=320" that is causing the Problem. Instead of pushing the content to the right, IPhone is just downscaling all content.
Is there a way to prevent this?

[adgsm]

i'm quite much sure that's the problem. take a look here how can you tweak you viewport settings https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

[adgsm]

I've just tested on iPad. Setting simply

<meta name="viewport" content="width=device-width, initial-scale=1">

will solve your problem.

P.S. I've copied your code for test purposes at http://make.rs/test.html

[suhaenni]

Hi
Thanks for testing. On IPhone i have still the same problem.
Probably on IPad you dont have the scaling down as there is enough space on the display screen.
See below screenshot from an IPhone 6S. It is scaling down the navigation and content does't go out of the screen.
(Because there is only small content, menu is scaled down only a little bit, but a soon as the content is 320 Pixels wide again, scaling will be more and thus menu hard to read and navigate within)

G)

[adgsm]

If you don't want users to scale content (although I see many people out there do not recommend it) you can set the width and turn off user scaling as follows:

<meta name = "viewport" content = "user-scalable=no, width=device-width">

[suhaenni]

I tried "user-scalable", but makes no difference in IPhone behaviour.
I will for now do a workaround: detect IPhone with Javascript and then change menu size and enlarge fontsize for IPhone like so:

    //check if IPhone
            var is_iphone = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
            <!---var is_iphone=/iphone/i.test(navigator.userAgent.toLowerCase());--->
            //change menu size and styles for IPhone
            if(is_iphone==true) {
                var menu_width = '500px';
                $('#menu').addClass('iphone');
            } else {
                var menu_width = '250px';
            }               

Strange to me is, that the original menu from Codrops I have used on http://www.eurospine.org
works perfect on IPhone, no scaling of menu at all.

Thank you for your help. For me, this is still the best menu of this type!
Maybe you find a solution one time.

[adgsm]

glad to hear you've found a workaround... if you don't need to support older browsers (i.e. IE 8) I would always recommend you to use Codrops MultiLevelPushMenu since it is relaying on CSS 3D Transforms.

[suhaenni]

The reason we changed to your menu ist, that on Codrops MultiLevelPushMenu you cannot scroll down the menu if there are too many navigation-points to display on screen. On your menu this is possible. it is possible to scroll on the part outside of the menu, on former version v1 it was even possible to scroll the menu.

BTW: is there a way to donate for your work?