对 IE10-11 上的 "dragging" 背景图片有什么建议吗？

Question

我有一个页脚，它是一个背景图像并随页面水平滚动。在 IE10-11 上，图像排序为 drags/smears。当然在所有其他浏览器中都可以。

不幸的是，出于客户原因，我无法共享开发站点，但这里有一个问题的简短视频。很抱歉出现断断续续的情况，但我想您可以看到页脚图像中绿色部分的问题。 https://drive.google.com/file/d/1j7c8w378EzlSPknHAIGhfBnir546DmqU/view?usp=sharing

这是我的页脚 CSS：

#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;
}

和 JS：

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

Answer 1

您遇到的问题是 IE 无法正确呈现具有渐进透明度的 .png 文件，也称为 "the png bug"。

有几种修复方法，都命名为 "the png hack" 或类似名称。

最可靠和最容易应用的方法之一是 the IE PNG fix。

您可以在此 CSS 技巧 article.
中阅读更多相关信息（并找到替代修复方法）如果可能的话，放弃渐进式透明度（以 PNG-8 格式保存）可能会有所帮助。

对 IE10-11 上的 "dragging" 背景图片有什么建议吗？

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

html

css

background-image