绝对定位元素上的 CSS3 过渡在 Canvas、Embed 下消失答案

【问题标题】：CSS3 Transition on absolute positioned element disappears under Canvas, Embed绝对定位元素上的 CSS3 过渡在 Canvas、Embed 下消失
【发布时间】：2014-02-22 05:25:14
【问题描述】：

我有一个带有使用绝对定位元素的下拉菜单栏。悬停时，元素使用 CSS3 过渡淡入。请注意，我们使用的是 Zurb 的 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;
    }
}

我们有一个OpenSeadragon 图片的实例，在一个页面上使用 html5 <canvas> 选项，在另一个页面上使用 YouTube <embed>。 YouTube 嵌入有wmode="Opaque" 和&wmode=transparent 代码，以强制他们遵守here 概述的z-index。嵌入和画布及其父元素都设置为z-index: 2; position: relative;

我们遇到的问题是，一旦转换完成，.dropdown 元素就会落在<canvas> 和<embed> 后面。这似乎主要发生在 Chrome 上。只要我们将鼠标悬停在任何菜单项上，菜单就会弹回前面。

我们如何解决这个问题？

【问题讨论】：

标签： html5-canvas css-transitions zurb-foundation

【解决方案1】：

删除过渡解决了这个问题。菜单在画布和嵌入的前面弹出并停留在那里。

不过，这并没有解决 CSS 转换的问题。为了解决这个问题，我将webkit-transform: translate3d(0px, 0px, 0px); 应用于.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;
    }
}

现在我有一个过渡出现在嵌入和画布的顶部。快乐的日子！

【讨论】：

我遇到了类似的问题，如果应用了 CSS 转换（特别是；transform: translate3d），元素会隐藏在 webkit 上，直到将鼠标悬停在它们上面。添加“-webkit-transform: translate3d(0px, 0px, 0px); opacity: 0;”这些元素解决了这个问题。先生，您真是个天才！谢谢。
有人能解释一下为什么会这样吗？

【解决方案2】：

只需将z-index 添加到更高的数字，例如：

z-index: 1111;

如果需要添加：

pointer-events: none;

【讨论】：

这不起作用，这是我们尝试的第一件事。 :)