当我打开菜单菜单时，如何解决在我的网站上发生的图像“闪烁”？

我有一个移动网站，我试图实现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上的相对位置（在我的实际网站设计中），但在打开菜单时不会“闪烁”。

有谁知道会造成这种情况和/或如何解决？

来源

2013-10-17 caveman

也许是因为标签高亮颜色设置CSS像* {-webkit抽头高亮彩色的：RGBA（0， 0,0,0）;} – Bernhard

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

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

div.bgImage 
{ 
    z-index: 1; 
}

Fiddle

来源

2013-10-17 21:41:39

当我打开菜单菜单时，如何解决在我的网站上发生的图像“闪烁”？

回答

相关问题