1

我有一个移动网站，我尝试在上面实现 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/

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

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

有谁知道是什么原因造成的和/或如何解决？

4

1 回答 1

1

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

给它一个积极z-index的解决问题：

div.bgImage
{
    z-index: 1;
}

小提琴

于 2013-10-17T21:41:39.607 回答