如何解决图像“闪烁"的问题?打开mmenu菜单时在我的网站上会发生什么? [英] How can I fix the image "flashing" that occurs on my site when I open the mmenu menu?

问题描述

我有一个移动网站，尝试在其上实现JQuery mmenu插件(可以在此处找到最出色的插件: http://mmenu.frebsite.nl/).我遇到的问题是，当用户打开菜单(单击链接/按钮)时，相对定位的我的主要背景图像闪烁".它消失，然后立即返回.这在台式机浏览器中很快发生，但是在移动浏览器中却非常明显，并且破坏了体验.

I have a mobile website that I have tried to implement the JQuery mmenu plugin on (most awesome plugin can be found here: http://mmenu.frebsite.nl/). The problem I am having is that when a user opens the menu (clicking the link/button) my main background image which is relatively positioned "flashes". It disappears and then comes back immediately. This happens very quickly in a desktop browser, but in a mobile browser it is very noticeable and ruins the experience.

有问题的图像定义如下:

The image in question is defined as follows:

<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 /

I have posted a sample jsfiddle here: http://jsfiddle.net/caveman/9xS82/20/

如果运行示例(尤其是在台式机浏览器上)，请在单击右上角的菜单按钮的同时观看主图像(人工钓鱼).您可能必须尝试几次才能看到足够慢的闪光灯才能看到(就像我之前提到的那样，台式机并不是很引人注目，但是在移动设备上，它的运行速度要慢得多，而且看起来也不好)

If you run the example (especially on a desktop browser), watch the main image (man fly fishing) while clicking the menu button in the upper right corner. You may have to try a few times to get a slow enough flash to see (like I mentioned previously, desktop is not very noticeable, but on mobile it is much slower and doesn't look good)

我认为这与img相对定位(position:relative)有关.在Firebug中进行操作时，如果我删除了img上的position:relative，则该位置不合适(在我的实际网站设计中)，但是在打开菜单时不会闪烁".

I think this has something to do with the img being relatively positioned (position:relative). When manipulating in Firebug, if I remove position:relative on the img it is out of place (in my actual site design) but does not "flash" when opening the menu.

有人知道这是什么原因和/或如何解决?

Does anyone know what would be causing this and/or how to fix?

推荐答案

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

In your mobile_old.css stylesheet the z-index of .bgImage was set to -99 so the element quickly hides behind the main content as a result. If you change the color of the content behind it, the flicker will show that color instead (to prove that it's hiding behind the content).

给它一个正数z-index解决了这个问题:

Giving it a positive z-index solves the issue:

div.bgImage
{
    z-index: 1;
}

小提琴

这篇关于如何解决图像“闪烁"的问题?打开mmenu菜单时在我的网站上会发生什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！