Search code examples
htmlcssbackground-image

Any suggestions on "dragging" background image on IE10-11?

I have a footer that's a background-image and scrolls horizontally with the page. On IE10-11 the image sort of drags/smears. Of course it's fine in all other browsers.

Unfortunately, I can't share the dev site for client reasons but here is a short video of the problem. Sorry for the choppiness, but I think you can see the issue with the green part in the footer image. https://drive.google.com/file/d/1j7c8w378EzlSPknHAIGhfBnir546DmqU/view?usp=sharing

Here is the CSS for my footer:

#footer {
    height: 30%;
    background: transparent url(../img/footer.png) repeat-x;
    background-position-x: 0px;
    position: fixed;
    bottom: 0;
    left:0;
    width: 100%;
    background-size: cover;
    background-size: auto 100%;
    background-repeat: repeat-x;
    z-index: 100;
}

And the JS:

$(document).on('scroll', (function() {
    // handles the scrolling of the footer
    $('#footer').css('background-position-x', -$(document).scrollTop());
}));
Solution

  • What you're experiencing is IE's inability to properly render .png files with progressive transparency, also known as "the png bug".

    There are several methods to fix it, all named "the png hack" or similar.

    One of the most reliable and easy to apply is the IE PNG fix.

    You can read more about this (and find alternative fixes) in this CSS Tricks article.
    If possible for your example, giving up progressive transparency (saving in PNG-8 format) will likely help.