Flickering line under background image in Firefox on resize

问题

I'm building a website that has a full width background image in the header that resizes with the page. There is an unusual flickering horizontal line that appears under the image when it is resized in Firefox. The line does not appear at full with, but blinks on and off when the size is changed. The line appears at the bottom of the background image, not the bottom of the header element.

It appears in the MacOS build of Firefox only when I tested it in OSX 10.8.4, Firefox 23.0. The problem did not appear with Windows 8, Firefox 23.0.1, or in other browsers that I have tested.

Here is the code on my header:

<header>
    <h1><span>Sound Soups on Madison - Healthy &amp; Convenient Alternatives for Your Busy Work Week</span><a href="index.php"><img src="images/sound-soups.jpg" id="logo" alt="Sound Soups"></a></h1>
    <nav id="nav-main">
        <?php echo makeLinks($nav1); ?>
    </nav>
</header>


header{
    padding:0 2.12765957% 35px;
    overflow:hidden;
    background-image:url('../images/bg-header.jpg');
    background-repeat:no-repeat;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
}

I've tried using cover instead of 100% for the background size, and putting padding or a border under the header. Googling the problem didn't turn up anything. Thanks in advance if anyone knows the answer here.

回答1:

EDIT:

The issue seems to be related to how FireFox scales the background image. The following seems to fix it for me with FireFox 23.0.1 , OSX 10.8.4

In style.css, try changing the background-size property in the header rule from 100% auto to 99.99% auto, ie

header {
background-image: url("../images/bg-header.jpg");
background-repeat: no-repeat;
background-size: 99.99% auto; 
margin: 0;
overflow: hidden;
padding: 0 2.12766% 35px;
}

~~If I'm understanding your question correctly, check the top of the stylesheet @ http://soundsoups.julie-edwards.com/css/responsive.css~~

You have

header{
    background-image:url('../images/none.png');
    padding-bottom:15px;
    border-bottom:2px solid #7a918c;
    margin-bottom:20px;     
}

I think the border-bottom is the cause of the problem.

Good luck!

回答2:

Had the same problem for a background-sized image on the body element. I fixed it by applying the background-sized image to a positioned div element.

If that can be of any help.

回答3:

I solved this problem by converting my .jpg background image to a .png. In case anyone else runs into this and can't change background-size, try this.

来源：https://stackoverflow.com/questions/18423884/flickering-line-under-background-image-in-firefox-on-resize

标签

css

firefox

responsive-design

background-image