0

I have a menu bar with drop downs that use absolute positioned elements. On hover, the elements fade in using CSS3 transitions. Note, we're using a heavily modified version of Zurb's Foundation 4. 

.has-dropdown {
    .dropdown {
        z-index: 90;
        opacity: 0;
        transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
    }
    &.hover .dropdown {
        opacity: 1;
    }
}

We have an instance of an OpenSeadragon image, using the html5 <canvas> option on one page, and a YouTube <embed> on another. The YouTube embed has the wmode="Opaque" and &wmode=transparent code on them to force them to respect z-index as outlined here. Both the embed and the canvas and their parent elements are set to z-index: 2; position: relative;

The issue we're running into is that the .dropdown element drops behind the <canvas> and the <embed> once the transition is complete. This seems to happen mostly on Chrome. As soon as we mouse over any of the menu items, the menu pops back in front.

How do we fix this?

Community
  • 1
  • 1
Will Lanni
  • 923
  • 12
  • 25

2 Answers2

3

Removing the transition fixed the issue. The menu popped right in front of both the canvas and the embed and stayed there.

This didn't solve the issue with having a css transition, though. In order to fix that, I applied a webkit-transform: translate3d(0px, 0px, 0px); to the .dropdown:

.has-dropdown {
    .dropdown {
        -webkit-transform: translate3d(0px, 0px, 0px);
        opacity: 0;
        transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
    }
    &.hover .dropdown {
        opacity: 1;
    }
}

Now I have a transition that appears over the top of the embed and the canvas. Happy days!

Will Lanni
  • 923
  • 12
  • 25
  • 1
    I was having a similar problem, elements were hiding on webkit until hovering over them if a css transition had been applied (specifically; transform: translate3d). Adding "-webkit-transform: translate3d(0px, 0px, 0px); opacity: 0;" to these elements fixed the issue. You sir, are a genius! Thanks. – patrickzdb Mar 13 '14 at 13:10
  • Can someone please give an explanation on why this works? – Chandan Sep 02 '20 at 20:08
0

Just add z-index to higher number like:

z-index: 1111;

If needed add:

pointer-events: none;
g00glen00b
  • 41,995
  • 13
  • 95
  • 133
amjad1233
  • 21
  • 7