Hi guys. Very useful module - thanks.

The issue I've found only seems to occur on the iPad (i.e. no problem at all on the latest desktop versions of IE, Chrome & Firefox) but the issue is identical on both the Safari and Chrome browsers on the iPad2:

1. All my superfish parent menus (li... .menuparent) are not visible until one-touched (on the iPad, of course) whereupon the do become visible.*
2. Any childless superfish menu items (li... .sf-no-children) are not effected and remain visible (above the flexslider containers).
3. The superfish menus, all horizontal, worked fine before deploying flexslider.
4. I've only seen this error on the iPad(2) but its exactly the same in Chrome and Safari.

*I.E. the whole li element (with colors, a links and background image in the li element) is invisible - presumably trapped behind a z-index level somewhere - until the first touch whereupon the whole li element plus submenus appear as normal (on top of the flexslider containers).

I've searched and can see lots of threads on identical issues that affected these two modules together for IE7/8 browsers earlier this year, suggesting that it was a problem with missing z-index classes on FlexSlider, but I've found nothing specific to concerning the iPad/2.

Testing the same issue on the desktop version IE8 shows the li elements correctly positioned on top of the flexslider containers.

I appreciate this seems to look like a Superfish issue - except that the menus work fine without flexslider - where I was previously using the Views Slideshow option - before needing an adaptive solution.

I'll post the same issue on Superfish too - but I would love to hear from anyone with the same issue and what they did (precisely) to fix it. I presume it's all z-index related but everything I've tried so far doesn't seem to bring the un-touched li element over flexslider.

Thanks.

Q
EDIT: cross referenced post is here: http://drupal.org/node/1704582#comment-6384746 but I'm still guessing this is likely to be a Flexslider issue (or same-name function? I'm only guessing).

Comments

criz’s picture

criz
he/him
Location Vienna/Austria
CreditAttribution: criz commented

I can confirm this nasty bug. And this bug only appears when using "Slide" as animation. When using "Fade" the superfhish menu works as aspected.

criz’s picture

criz
he/him
Location Vienna/Austria
CreditAttribution: criz commented

And it is the menu li element that hides when the slider is loaded. Setting the menu list elements to position: static; helps, but is no solution of course.

quantos’s picture

quantos CreditAttribution: quantos commented

Thanks Criz. I didn't know that so at least I can swap to using fade instead now.

Testing further over the weekend:

1. it seems the bug isn't restricted to either the iPad or iPhone but works can be seen and tested on Safari (Windows) too.
2. the "bug" also appears when the FlexSlider content is nowhere near the navigation bar too, and in a completely different region on the page - which would seem to rule-out the problem being z-index related.

Q

criz’s picture

criz
he/him
Location Vienna/Austria
CreditAttribution: criz commented
Title: z-index issue with flexslider and superfish on ipad » Display issue with Flex Slider and Superfish on iPad / Safari
Priority: Normal » Major

Yes, I also don't think it is a z-index issue...

bratsun’s picture

bratsun CreditAttribution: bratsun commented

I should confirm the same - superfish menu does hide together with flexslider (whatever the region is in our custom sub-Omega theme).

Z-index and position changes in css bring no luck at all.

We have switched to fade instead of slide transition for now. Works well but slide transition fix would be highly appreciated.

cdnsteve’s picture

cdnsteve CreditAttribution: cdnsteve commented

Having same issue with SuperFish with Omega and FlexSlider specific to the "slide" animation option, fade works fine.

minorOffense’s picture

minorOffense CreditAttribution: minorOffense commented
Status: Active » Postponed (maintainer needs more info)

Any way to test this with the newer FlexSlider library? If it's a library issue there's not much I can do about it.

Give the 2.x branch a shot and let me know how it goes.

kgertz’s picture

kgertz
Primary language German
Location Konstanz
CreditAttribution: kgertz commented
Title: Display issue with Flex Slider and Superfish on iPad / Safari » CSS transition causes hiding of menu elements in Safari
Priority: Major » Minor
Status: Postponed (maintainer needs more info) » Fixed

The bug seems to come from Safari: the CSS-transition used by FlexSlider: -webkit-transform: translate3d(...) makes the menu items disappear on Safari (it’s the same with other libraries like e.g. Isotope that use translate3d, hence neither a superfish or a FlexSlider bug).

As a workaround You can:

a) either avoid this transition (e.g. use fade) or
b) suppress the use of CSS transitions in FlexSlider’s option set - try: useCSS: false (haven‘t tried that one, however) or
c) apply this very transition to the superfish list and list items themselves, which worked for me:

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

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

(not verified) CreditAttribution: commented
Issue summary: View changes

Added a cross-reference to Superfish.

Roden’s picture

Roden CreditAttribution: Roden commented

"c" option worked a treat. Thanks for sharing; still not fixed on Chrome android.

mikee’s picture

mikee CreditAttribution: mikee commented

Thanks - #8c also resolved issue for me on Safari.

smallcoder’s picture

smallcoder CreditAttribution: smallcoder commented

kgertz - you are my hero :) Thanks, was having the same irritating problem with Safari today and "c" fixed it straight away,