在使用CSS变换时，Chrome中的固定附属背景图像会闪烁/消失

以下是一种可行的解决方案（2014.7.11），适用于Firefox 30.0、Chrome 35.0、Opera 22.0和IE 11.0：
第一步：在.htaccess中添加以下几行代码：

# cache for images
<FilesMatch "\.(png)$">
Header set Cache-Control "max-age=10000, public"
</FilesMatch>

• 问题的详细描述以及如何修复： https://code.google.com/p/chromium/issues/detail?id=102706

步骤2：添加图像预加载，例如：

var pics = []; // CREATE PICS ARRAY

$(document).ready(function(){
    ...
    preload(
        '/public/images/stars.red.1.star.png',
        '/public/images/stars.red.2.star.png',
        '/public/images/stars.red.3.star.png',
        '/public/images/stars.red.4.star.png',
        '/public/images/stars.red.5.star.png',
        '/public/images/stars.empty.png'
    );
    ...
    $('.rating').on('mousemove', function(event){
        var x = event.pageX - this.offsetLeft;
        var id = getIdByCoord(x); //
        if ($(this).data('current-image') != id) {
            $(this).css('background-image', 'url(' + pics[id].src + ')');
            $(this).data('current-image', id);
        }
    })
    ...
})

...

// PRELOAD FUNCTION TO SET UP PICS ARRAY IN MEMORY USING IMAGE OBJECT
function preload() {
    for (i = 0; i < arguments.length; i++) {
        pics[i] = new Image();
        pics[i].src = arguments[i];
        // alert("preload " + arguments[i]);
    }
}

P.S. 感谢Shawn Altman

我的任务是创建一个带有视差效果的页面。在尝试使用CSS修复后，我想出了以下解决方案。

JavaScript:

var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (isChrome)
{

    var itemArr = $('.slider-title');

    $(window).scroll(function()
    {
        var pos = $(window).scrollTop();
        var wh = window.innerHeight;

        $(itemArr).each(function(i, item){

            var p = $(item).position();
            var h = $(item).height();
            if (p.top + h > pos && p.top < pos+wh)
            {
                // items ir redzams
                var prc = (p.top - pos +h)/wh ;
                //console.log(prc);
                $(item).css({'background-position':'center '+prc+'%'});
            }

        });
    });

}

CSS：

    /*only for webkit  browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .slider-title{ 
        background-size:auto;
        background-position: center 0%;
    }
}

.slider-title将是具有background-attachment fixed的项目。

这个发现有些晚，但仍然很惊人，因为我可以看到大多数CSS框架用户（如Bootstrap、Foundation等）都存在问题。我相信你们中的许多人也有滚动到页面顶部的JS函数，当用户开始向下滚动时显示“回到顶部”按钮。
如果你有类似的东西（Bootstrap内置了它）。

.fade {
    opacity: 0;
    -webkit-transition: opacity .35s linear;
    -o-transition: opacity .35s linear;
    transition: opacity .35s linear;
}
.fade.in {
    opacity: 1;
}

或者你正在通过 <script> 显示某个元素。

-webkit-transition: opacity .35s linear;
-o-transition: opacity .35s linear;
transition: opacity .35s linear;

如果您正在通过js（animation.css，waypoints.js，velocity.js）在滚动向下时添加任何类型的元素或元素类（带有过渡效果），请尝试从该元素中删除过渡效果/类，或者重新检查该元素何时出现以解决Chrome卡顿问题。

如果您必须使用position: fixed/relative/absolute，可能是因为您内部有一个绝对定位的元素（就像我的情况一样），那么另一个解决方法是在闪烁的div内创建一个包装器div，并将位置和背景属性移动到其中。

例如：

您原来的代码可能是 -

<div class="background-flickers' style="background:url('path-to-image'); position:relative">
 <absolutely positioned element>
</div>

可能的解决方法

<div class="no-more-flicker!">
 <div class="wrapper" style="style="background:url('path-to-image'); position:relative">
  <absolutely positioned element>
 </div>
</div>

我不再有闪烁问题了，显然闪烁 bug 不会传递到子容器。

似乎在Chrome中添加元素标记时会出现错误。尝试从该元素中删除背景并将其设置为position:relative。在元素内部添加一个具有所需尺寸和背景的新div，但不要在其中添加任何标记。

示例：

当前：

<div class="container" style="background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
     <div class="example"></div>
</div>

已更正：

 <div class="container" style="position:relative;">
     <div class="added-background" style="position:absolute;width:100%;height:100%;background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
     <div class="example"></div>
</div>

希望这有所帮助！

我在叠加的div下面遇到了问题，它在弹出窗口中随机消失（在Opera 20中），两者都是通过脚本激活的。

<div class="popupwrapper">
    <div id="popupdownload" class="popup">
        <h1>Test</h1>
    </div>
    <div class="popupoverlay"></div>
</div>

---

.popupwrapper {
display:            none;
z-index:            9100;
}
.popupwrapper.active {
display:            block;
}
.popupwrapper > div {
-webkit-transition: opacity 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
-moz-transition:    opacity 150ms ease-in-out, -moz-transform 150ms ease-in-out;
-ie-transition: opacity 150ms ease-in-out, -ie-transform 150ms ease-in-out;
transition:         opacity 150ms ease-in-out, transform 150ms ease-in-out;
}
.popupoverlay {
position:           absolute;
top:                0;
right:              0;
bottom:             0;
left:               0;
width:              100%;
height:             100%;
background:         rgba(26,26,26,.9);
opacity:            0;
}
.popup {
position:           fixed;
top:                30%;
left:               40%;
padding:            48px;
background:         #e6e6e6;
z-index:            9101;
-webkit-transform:  scale(1.6);
transform:          scale(1.6);
opacity:            0;
}
.popupoverlay.active {
opacity:            1;
}
.popup.active {
-webkit-transform:  scale(1);
transform:          scale(1);
opacity:            1;
}

覆盖层的定位方式是绝对定位（.popupoverlay），但它所在的容器没有进行任何定位。我将覆盖层的绝对定位复制到其父元素（.popup）上，现在可以正常工作了。

.popupwrapper {
position:           absolute;
top:                0;
right:              0;
bottom:             0;
left:               0;
width:              100%;
height:             100%;
display:            none;
z-index:            9100;
}

我认为问题只会在父元素的定位不明显时出现。

如果能帮到任何人，我会很高兴。敬礼

问题仍然存在。 我在Google Chrome上遇到了这个问题，当我使用 {background-attachment: fixed; transform: scale(1); transition: transform} 时。 我需要background-attachment为固定以实现视差效果。 我正在滚动时缩放容器。 当转换和变换被移除时，视差起作用。话虽如此，在Chrome上我可以有一个比例效果或视差效果，但不能同时工作。 Safari没有抱怨，并且两者都运行良好。

我在Chrome浏览器中也遇到了同样的问题

解决方法非常简单，无需添加任何webkit和媒体标签，只需按照以下步骤操作：

1.不要使用background:url('path-to-image')，而是像下面这样设置图像，并将位置设置为fixed

2.这样可以在Chrome和IE浏览器中正常工作