blocks|key|189452|text|现在回答可能有点晚了，但似乎这个bug附带了后台附件:+chrome中的固定属性。我找到了一个解决方案，将它的值改为"scroll“。它将在firefox上造成jitterin效果，但您可以在CSS中使用媒体浏览器查询来避免它，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|189453|.yourstellarlayer{
+++++background-attachment:+fixed;
}
/*only+for+webkit++browsers*/
@media+screen+and+(-webkit-min-device-pixel-ratio:0)+{
++++.yourstellarlayer{+
++++++++background-attachment:+scroll;
++++}
}|code-block|syntax|javascript|189454|希望它能帮上忙！|189455|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Maybe a little late to answer, but it seems that the bug comes with the background-attachment: fixed property in chrome. I found a solution changin its value to "scroll". It will cause a jitterin effect on firefox but you can avoid it using a media-browser query in your CSS, something like this:

<pre><code>.yourstellarlayer{
 background-attachment: fixed;
}
/*only for webkit browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
 .yourstellarlayer{ 
 background-attachment: scroll;
 }
}
</code></pre>

Hope it helps!

blocks|key|4695601|text|这真的让我很烦，它几乎毁了我的夜晚。我的解决办法是设置|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4695602|background-attachment:+scroll;|code-block|syntax|javascript|4695603|它对我的项目起作用了。|4695604|在此之前，我把它修好了。希望这能有所帮助。|4695605|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

This really bugged me and it almost ruined my night. My fix is to set 

<pre><code>background-attachment: scroll;
</code></pre>

It worked on my project. 
Before this, I had it on fixed. Hope this helps.

blocks|key|4695428|text|对于我来说，问题是附加到具有固定背景的div的父元素的样式，我将-webkit-backface-visibility:+inherit;放在固定div的两个主要父元素中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4695429|在我的例子中，我在画布外使用了foundation，所以它是这样的|4695430|.off-canvas-wrap{
++++-webkit-backface-visibility:inherit;
}

.inner-wrap{
++++-webkit-backface-visibility:inherit;
}|code-block|syntax|javascript|4695431|entityMap^0|W|11|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

For me the issue was the styles attach to the parent elements of the div who has the fixed background, I put <code>-webkit-backface-visibility: inherit;</code> to the two main parents of my fixed div.

in my case I was using foundation off-canvas so it goes like this

<pre><code>.off-canvas-wrap{
 -webkit-backface-visibility:inherit;
}

.inner-wrap{
 -webkit-backface-visibility:inherit;
}
</code></pre>

blocks|key|189508|text|我们在position:+fixed;元素上也遇到了类似的问题。该元素包含一个相对定位的容器，其中包含一个绝对定位的图像。在CSS过渡时，图像消失了，当过渡完成时，图像又重新出现了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|189509|我们尝试通过在包括body元素在内的几个元素上将-webkit-backface-visibility设置为hidden来解决该问题，但这没有帮助。在这个线程的帮助下，我们使用Chrome的网页检查器来摆弄元素的position属性，幸运的是，我们能够在不改变网站太多的情况下解决这个问题。(我们所要做的就是将固定元素的父元素的位置改为static)|189510|entityMap^0|3|G|0|O|R|1I|6|2Y|8|4O|6|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$]]

We had a similar problem with a <code>position: fixed;</code> element. This element contained a relatively positioned container, containing an absolutely positioned image. On CSS transition the image disappeared, when the transition was done is re-appeared.

We tried solving the problem by setting the <code>-webkit-backface-visibility</code> to <code>hidden</code> on several elements, including the body element, but this did not help. With the help of this thread we used Chrome's web inspector to fiddle around with elments' <code>position</code> properties and luckily were able to solve the problem without having to alter the site that much. (all we had to do was change the position of the parent of the fixed element to <code>static</code>)

blocks|key|189981|text|近5年后的更新...这似乎仍然是chrome的一个问题。我已经尝试了上面提到的大多数解决方案，包括添加：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|189982|transform:+translate3d(0,0,0);
-webkit-transform:+translate3d(0,0,0);|code-block|syntax|javascript|189983|而且它没有解决卡顿的问题。添加background-attachment:+scroll消除了视差效果，而视差效果对网站的用户体验至关重要。上面提到的添加父元素的解决方案对我来说没有任何改变。最近有这个问题的人还有其他的想法吗？我在前端使用Gatsby(React)。|offset|length|style|CODE|189984|entityMap^0|0|0|F|T|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

An update almost 5 years in the future... This still seems to be a problem with chrome. I've tried most of the solutions mentioned including adding: 

<pre><code>transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
</code></pre>

and it is not fixing the stuttering issue. adding <code>background-attachment: scroll</code> takes away the parallax effect which is crucial to the UX of the site. The solution above that mentions adding a parent element is not changing anything for me. Any other ideas from people that have had this issue recently? I'm using Gatsby(React) on the front end.

blocks|key|189596|text|我的任务是创建一个具有视差效果的页面。在尝试通过CSS解决这个问题之后，我想出了以下解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|189597|JavaScript：|189598|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+%2B+h+>+pos+&&+p.top+<+pos%2Bwh)
++++++++++++{
++++++++++++++++//+items+ir+redzams
++++++++++++++++var+prc+=+(p.top+-+pos+%2Bh)/wh+;
++++++++++++++++//console.log(prc);
++++++++++++++++$(item).css({'background-position':'center+'%2Bprc%2B'%25'});
++++++++++++}

++++++++});
++++});

}|code-block|syntax|javascript|189599|CSS：|189600|++++/*only+for+webkit++browsers*/
@media+screen+and+(-webkit-min-device-pixel-ratio:0)+{
++++.slider-title{+
++++++++background-size:auto;
++++++++background-position:+center+0%25;
++++}
}|189601|.滑块-标题将是固定了背景附件的项目。|189602|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

My task was to create a page with a parallax effect. 
After attempts to fix this by means of CSS I came up with the following solution. 

JavaScript:

<pre><code>var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') &gt; -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 &gt; pos &amp;&amp; p.top &lt; pos+wh)
 {
 // items ir redzams
 var prc = (p.top - pos +h)/wh ;
 //console.log(prc);
 $(item).css({'background-position':'center '+prc+'%'});
 }

 });
 });

}
</code></pre>

CSS:

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

.slider-title would be the item with background-attachment fixed.

blocks|key|4695508|text|所以我在Chrome版本40上仍然看到这个问题。目前对我有效的解决方法是，在该div上创建一个内部div设置位置，使其适合其父div的高度，并在父div上设置背景，背景附件为fixed：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4695509|<section+style="background-attachment:+fixed;">
+<div+style="position:+relative;">
++//+Code+goes+here+including+absolute+posiioned+elements
+</div>
</section>|code-block|syntax|javascript|4695510|在我的例子中，当你将位置、相对和背景连接固定在同一个元素上时，问题似乎就会发生。|4695511|希望这能有所帮助。|4695512|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

So I am on Chrome version 40 and still seeing this issue. The workaround which is working for me at the moment is by creating a inner div setting position relative on that div and making it fit the height of its parent and setting the background on the parent div with a background attachment of fixed:

<pre><code>&lt;section style="background-attachment: fixed;"&gt;
 &lt;div style="position: relative;"&gt;
 // Code goes here including absolute posiioned elements
 &lt;/div&gt;
&lt;/section&gt;
</code></pre>

The problem seems to occur when you have a position relative and background attachment fixed on the same element in my case.

Hope this helps.

blocks|key|189796|text|我在chrome中也遇到了同样的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|189797|它非常简单，不需要添加任何webkit和媒体标签，只需遵循以下步骤|189798|1.不是使用background:url('path-to-+image+')来设置图像，如下所示，并将位置设置为固定|189799|它可以在chrome和IE浏览器中运行|189800|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

i also had same issues in chrome 

it's very simple no need to add any webkit &amp; media tag just follow below steps

1.instead of background:url('path-to-image') set the image like below and set the position as fixed

2.
it will work in chrome as well as IE browser

blocks|key|4695656|text|这是一个迟来的聚会，但一个惊人的发现，因为我可以看到大多数css框架用户，Bootstrap，Foundation+(其他)，有问题，我相信你们中的许多人也有滚动到顶部js功能，当用户开始向下滚动时显示滚动到顶部按钮。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4695657|如果你有类似的东西(+Bootstrap内置了它)|4695658|.fade+{
++++opacity:+0;
++++-webkit-transition:+opacity+.35s+linear;
++++-o-transition:+opacity+.35s+linear;
++++transition:+opacity+.35s+linear;
}
.fade.in+{
++++opacity:+1;
}|code-block|syntax|javascript|4695659|或者您正在显示某个元素via，|4695660|-webkit-transition:+opacity+.35s+linear;
-o-transition:+opacity+.35s+linear;
transition:+opacity+.35s+linear;|4695661|或者您正在通过js+(+animation.css，waypoints.js，velocity.js+)向下滚动添加任何类型的元素或带有过渡的元素类|4695662|如果可能，从该元素中删除转换/类，或者在该元素出现时重新检查，以修复不稳定的Chrome问题。|4695663|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

This one is late to party but an amazing discovery, 
as I can see mostly css framework users, Bootstrap, Foundation (others) , have issues, and I am sure many of you also have scroll to top js functions that show scroll to top button as user starts scrolling down , 

if you have anything like this ( Bootstrap has it built in ) 

<pre><code>.fade {
 opacity: 0;
 -webkit-transition: opacity .35s linear;
 -o-transition: opacity .35s linear;
 transition: opacity .35s linear;
}
.fade.in {
 opacity: 1;
}
</code></pre>

or you are showing some element via ,

<pre><code>-webkit-transition: opacity .35s linear;
-o-transition: opacity .35s linear;
transition: opacity .35s linear;
</code></pre>

or you are adding any kind of element or element class with transition , on scroll down, via js ( animation.css, waypoints.js, velocity.js ) 
remove transition/class if possible from that element or recheck when that element appears in order to fix the choppy Chrome issue.

blocks|key|4695698|text|将transform属性添加到具有固定背景图像的元素。你可以有任何设定的位置。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4695699|#thediv+{
++++width:+100%25;
++++height:+600px;
++++position:+relative;
++++display:+block;
++++background-image:+url(https://cdn.shopify.com/s/files/1/1231/8576/files/hockeyjacket1.jpg);
++++background-size:+cover;
++++background-position:+center;
++++background-repeat:+no-repeat;
++++background-attachment:+fixed;
++++border:+10px+solid+black;
++++transform:+translate3d(0,0,0);
++++-webkit-transform:+translate3d(0,0,0);
}|code-block|syntax|javascript|4695700|https://jsfiddle.net/rkwpxh0n/2/|4695701|entityMap|0|LINK|mutability|MUTABLE|url^0|1|9|0|0|0|W|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|W|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|L]]]]

Add the <code>transform</code> property to your element with fixed background image. You can have any set position.

<pre><code>#thediv {
 width: 100%;
 height: 600px;
 position: relative;
 display: block;
 background-image: url(https://cdn.shopify.com/s/files/1/1231/8576/files/hockeyjacket1.jpg);
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 background-attachment: fixed;
 border: 10px solid black;
 transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
</code></pre>

<a href="https://jsfiddle.net/rkwpxh0n/2/" rel="nofollow noreferrer">https://jsfiddle.net/rkwpxh0n/2/</a>

blocks|key|4695315|text|当你在元素上添加任何标记时，Chrome似乎就会出现bug。尝试从这样的元素中删除背景，并为其指定一个位置:relative。在元素中添加一个带有所需尺寸的新div，并添加背景，但不要在其中添加任何标记。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4695316|示例：|4695317|当前：|4695318|<div+class="container"+style="background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
+++++<div+class="example"></div>
</div>|code-block|syntax|javascript|4695319|已更正：|4695320|+<div+class="container"+style="position:relative;">
+++++<div+class="added-background"+style="position:absolute;width:100%25;height:100%25;background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
+++++<div+class="example"></div>
</div>|4695321|希望它能帮上忙！|4695322|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Seems to bug in Chrome the moment you add any markup on the element. Try removing the background from such element and give it a position:relative. Inside the element add a new div with the dimensions you need and add the background, just don't add any markup inside of it.

Example:

Current:

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

Corrected:

<pre><code> &lt;div class="container" style="position:relative;"&gt;
 &lt;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;"&gt;
 &lt;div class="example"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

Hope it helps!

I am currently doing a parallax website theme. The background images need to be attached as fixed for certain 'div's and 'section's to avoid jquery indulging in everything. The problem was the background images of the tags below any animated item disappeared while the transformation is being done, only on Google Chrome. Remedy?

Fixed attachment background image flicker/disappear in chrome when coupled with a css transform

容器

我目前正在做一个视差网站的主题。背景图片需要附加到固定的‘div’和‘节’，以避免jquery沉迷于一切。问题是任何动画项目下面的标签的背景图像在转换过程中都消失了，只在Google Chrome上。补救措施？

问修复了附件背景图像在与css转换结合使用时在chrome中闪烁/消失的问题
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问修复了附件背景图像在与css转换结合使用时在chrome中闪烁/消失的问题EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问修复了附件背景图像在与css转换结合使用时在chrome中闪烁/消失的问题
EN