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

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

有问题的图像定义如下:

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

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

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

有谁知道会导致这种情况和/或如何解决?

在您的mobile_old.css样式表中,.bgImage的z-index设置为-99因此该元素会快速隐藏在主要内容后面。 如果您更改其背后内容的颜色,闪烁将显示该颜色(以certificate它隐藏在内容后面)。

给它一个积极的z-index解决了这个问题:

 div.bgImage { z-index: 1; } 

小提琴