Third Level Problems in Safari

Home Forums Older releases 0.9.x Third Level Problems in Safari

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1392
    GrafFoto
    Participant

    Hello.
    I have combined Smartmenu with the HTML5 Kickstart Solution. Everythings works very fine. But there is a problem with Safari (testet with WIN7 and I-Pad). Here is a testsite: http://www.testsite.siegmann.ws/kick_brand/

    The mouse-over effect in the menu works fine in safari if there is only a second level navigation (as you can see at ‘Testseite’).
    But if there is a third level (‘Tabelle’) you can reach only the first level.
    In all other browsers everything works fine.

    #1708
    admin
    Keymaster

    Hi,

    I just checked on Mac and iPad and it seems to work fine. I can open the third level sub menu for “Tabelle” and click on the “test 3. Ebene A” and “test 3. Ebene B” links just fine.

    Maybe you’ve fixed the issue already?

    #1709
    GrafFoto
    Participant

    Hi,
    let me first say a real big THANK YOU for your support.

    No, I haven’t fixed the bug until now. I’ve tested with the old I-Pad 1 and the actual WIN Safari. But it is good to hear, that it works fine with the MAC Safari.

    The Smartmenu Homepage works fine with PC and I-Pad 1 … so I am sure, that I produced the error, but I have no more idea how I can find a solution. So, I would be real glad, if you could help me (if it is a bigger thing, I can also pay for it).

    #1710
    admin
    Keymaster

    Hmm, yes, I noticed the issue on Windows. I need to go now but I will check it thoroughly tomorrow. Stay tuned..

    #1711
    admin
    Keymaster

    OK, after some thorough testing I figured out it was something related to the CSS transforms and/or animations used on the page – when I disabled them all including setting useCSS: false for the bxSlider script, it all works fine. However, I couldn’t figure out a simple solution until I searched for similar issues and found the following:

    https://www.drupal.org/node/1748514

    In your case, adding the following on the page:

    #main-menu ul,
    #main-menu li {
    	-webkit-transform: translate3d(0px, 0px, 1px);
    }

    solves the issue in Safari on Windows (and most probably old iPads though I can’t confirm right now).

    Cheers!

    #1712
    GrafFoto
    Participant

    Hi,
    thanks for the fast answer … now it works fine in I-Pad 1 …

    but NOT in my WIN safari (5.1.7) … I’ve used your CSS-Code and changed useCSS to false at the main index.php site.

    Sorry :-((

    #1713
    GrafFoto
    Participant

    It is a totally strange behaviour … if you see the startpage with useCSS:false ans reload it, the second level of ‘Tabelle’ ONLY appears, if you move the mouse in the area, where the second level is located (NOT if you move the mouse over ‘Tabelle’). When the second level appears once, everything works fine … but only until the next reload.

    With css:true it won’t work, also if I delete the complete kick.css (where all the bx-slider CSS-code is located).

    #1714
    admin
    Keymaster

    I saw you have added the fix inside a media query – that’s probably why it doesn’t work for you in Safari on Windows:

    @media all and (max-width: 768px) {
    	.teaser5c { width: 98%; min-height: 0 !important; }
    	.teaser5c .teaserpicture {width: 50%;}
    		
    	#navibereich { position: relative !important; }
    	
    	#main-menu {
    	border-radius:0;
    	-moz-border-radius: 0;
    	-webkit-border-radius: 0;
    	}
    	
    	#main-menu ul,
    	#main-menu li {
    	-webkit-transform: translate3d(0px, 0px, 1px);
    }

    Move it out of the media query and it should work.

    #1719
    GrafFoto
    Participant

    Hello again.
    Ohhh … 1.000 points for cleverness for me … 😉

    Now it looks perfect! Thanks a lot!

    #1754
    GrafFoto
    Participant

    Hello again.
    Your bugfix works fine in safari.

    But I just saw that it produces a new bug in chrome browsers. I’ve testet it … if I delete it again, everything works fine in chrome.

    In the horizontal version you can see the bug here:
    http://www.siquando-templates.de/

    If you move the mouse over ‘Siquando Templates kaufen’, you can see, that the second level of the menu disappears behind the search-button.

    In the vertical version you can see the bug here:
    http://www.testsite.siegmann.ws/kick_v/tabelle/index.php

    ‘Tabelle’ has a class .current. If you move the mouse over ‘Testseite’, you can see that the second level disappears behind the red of the .current class.

    #1756
    admin
    Keymaster

    OK, change the following:

    #main-menu ul, #main-menu li {
    	-webkit-transform: translate3d(0px, 0px, 1px);
    }

    to:

    #main-menu ul, #main-menu a {
    	-webkit-transform: translate3d(0px, 0px, 1px);
    }

    Seems it fixes both issues for me.

    Let me know if you are still having any troubles.

    Cheers!

    #1758
    GrafFoto
    Participant

    🙂
    Yep … perfect!
    If you`ll ever come to Bielefeld, I`ll pay the beer!

    #1759
    admin
    Keymaster

    Hehe, OK, I’ll keep that in mind.. 🙂

    Cheers!

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?