Shopping Bag not op top (z-index) in Shop page

[rene.appeldoorn]

When browsing the Shop page, the Shopping Bag goes behind the products. I can’t explain this behavior in words, please take a look at the attached screenshot.

Browser: Chrome for Mac

Firefox and Safari are fine.

[rene.appeldoorn]

Just to make sure: only the Shop page is affected. In all other pages the Shopping Bag shows on top/front of the page.

[Melanie – SUPPORT]

Hi, can you see if one of these threads solves your issue?

http://support.swiftideas.net/search/?q=z-index
Cheers!

[rene.appeldoorn]

Sorry Melanie, I can’t find any solution in the threads you mentioned. I found a link to another Neighborhood website, showing the same behavior:

http://mybrabag.lingerie-expert.be/webshop-brabag/

Add some products to the shopping bag, and hover the shopping bag icon in the header. This works fine using different browsers, except Chrome (for Mac).

[Melanie – SUPPORT]

Hi,

try this custom css please:

.sub-menu {
z-index: 9999999!important;
}

Let me know if that works 🙂

[rene.appeldoorn]

No, sorry, doesn’t work. Hovering the mouse over the shopping bag icon in the header, shows a strange behavior. The entire shopping bag ‘pops up’ on top of the screen (as it is supposed to do), but then the product image underneath the shopping bag ‘pushes’ the shopping bag to a ‘lower level’ and the product image then shows on the upper layer. Maybe this has nothing to do with z-index, but with the Product Overlay Transition effect (which I turned off by the way).

When I turn on the Product Overlay Transition effect, and hover a product image, the product featured image will appear. And here we go: when moving away the mouse pointer, the ‘original’ product image will of course re-appear, but when quickly moving the mouse over the shopping bag icon in the header (during the transition effect), the shopping bag IS on top of the page.

So, probably the (Javascript?) Product Overlay Transition causes this shopping bag behavior. Disabling the Product Overlay Transition effect does not solve this problem, but that is probably because the effect script is loaded anyway?

[rene.appeldoorn]

Update: also hovering the two buttons on the bottom of the shopping bag brings the shopping bag back to front.

[rene.appeldoorn]

I have recorded a 30 seconds screen capture. Any help would be appreciated.

[Tahir – SUPPORT]

Hi, Please add this to css nav .menu ul.sub-menu li {-webkit-backface-visibility: hidden;}

Thanks
Tahir

[rene.appeldoorn]

You’re a genius Tahir, thanks! Does Ed add this code to future updates?

[Swift Ideas – Ed]

Thanks Tahir!

Added in the next update.

– Ed