Question

我有一个移动网站，我试图实现JQuery mmenu插件（最好的插件可以在这里找到：http://mmenu.frebsite.nl/）。我遇到的问题是当用户打开菜单（点击链接/按钮）时，相对定位的主背景图像“闪烁”。它消失然后立即回来。这种情况在桌面浏览器中很快发生，但在移动浏览器中它非常明显并且破坏了体验。

有问题的图像定义如下：

<div class="bgImage" style="position:relative;top:-26px">
    <img src="http://path-to-image.jpg" id="imgHero" />
</div>

我在这里发布了一个示例jsfiddle：http://jsfiddle.net/caveman/9xS82/20/

如果您运行该示例（特别是在桌面浏览器上），请在单击右上角的菜单按钮的同时观看主图像（man fly fishing）。您可能需要尝试几次以获得足够慢的闪光灯（就像我之前提到的，桌面不是很明显，但在移动设备上它速度要慢得多并且看起来不太好）

我认为这与img相对定位（位置：相对）有关。在Firebug中操作时，如果我移除位置：相对于img它是不合适的（在我的实际网站设计中）但在打开菜单时不会“闪烁”。

有谁知道会导致这种情况和/或如何修复？

Answer 1

在您的mobile_old.css样式表中，z-index的{{1}}设置为.bgImage，因此元素会快速隐藏在主要内容后面。如果您更改其背后内容的颜色，闪烁将显示该颜色（以证明它隐藏在内容后面）。

给予积极的-99解决问题：

z-index

Fiddle

当我打开mmenu菜单时，如何修复我网站上出现的“闪烁”图像？

1 个答案: