问题
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>
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)
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?
回答1:
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).
Giving it a positive z-index solves the issue:
div.bgImage
{
z-index: 1;
}
Fiddle
来源：https://stackoverflow.com/questions/19437723/how-can-i-fix-the-image-flashing-that-occurs-on-my-site-when-i-open-the-mmenu