Third Level Problems in Safari

[GrafFoto]

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.

[admin]

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?

[GrafFoto]

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).

[admin]

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

[admin]

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!

[GrafFoto]

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 :-((

[GrafFoto]

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).

[admin]

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.

[GrafFoto]

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

Now it looks perfect! Thanks a lot!

[GrafFoto]

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.

[admin]

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!

[GrafFoto]

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

[admin]

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

Cheers!

[Author]

Posts