固定附件背景图像闪烁/消失在铬与css转换结合
我目前正在做一个视差网站的主题。 背景图像需要附加固定的某些“div和”部分，以避免jquery沉迷于一切。 问题是在转换完成时，任何animation项目下面的标签的背景图像都只在Google Chrome上消失。 补救？
这是一个非常普遍的未解之谜。 最近我有同样的问题，并且'-webkit-backface-visibility：hidden'被certificate是没有用的（在我的“固定的”附加背景上），因为背景在设置时就消失了。 （ 附加信息：原因是当背景设置为固定的时候，几乎和在背景中放置一个固定的“div”，并将原始的div背景设置为透明一样，隐藏的背面很明显 ）。
为了解决当前的问题，可以尝试将元素的“ 位置 ”设置为“ 静态 ”，或者如果给了它一些其他的值，即“ 相对 ”，“ 固定 ”或“ 绝对 ”，就把它们除去。
如果你不记得设置位置属性，问题仍然存在，我的build议是，你使用铬或Firefox的debugging工具，以
确保没有手动设置的值'静态'以外的'位置'属性。
刚刚花了半个小时search…以为这可以使你更容易…问候。 🙂
这里同样的问题。 我有一个使用position:fixed;粘头position:fixed; 在PC铬34中闪烁。我尝试在这个线程的解决scheme， position:static; 在父母打破了其他部分。 但我知道添加-webkit-transform: translate3d(0,0,0); 基本上让Chrome把这个html转换成一个层，这样它就不会被重新绘制。 这对我有效。
element { position:fixed; top:0; left:50%; width:960px; height:50px; margin-left:-480px; -webkit-transform: translate3d(0,0,0); /* ...all other CSS... */ }
UPDATE
未来友好的答案是使用will-change属性来创build一个图层！
W3规格
我可以用吗
MDN定义
element { position:fixed; top:0; left:50%; width:960px; height:50px; margin-left:-480px; will-change:top; /* ...all other CSS... */ }
说实话，这看起来像是修复闪烁的一个奇怪的解决scheme，但实质上，它使元素成为一个层，与translate3d（）相同。
也许有点晚回答，但似乎错误与背景附件：铬中的固定属性。 我发现一个解决scheme改变它的价值“滚动”。 它会导致Firefox的抖动效果，但你可以避免在你的CSS中使用媒体浏览器查询，如下所示：
.yourstellarlayer{ background-attachment: fixed; } /*only for webkit browsers*/ @media screen and (-webkit-min-device-pixel-ratio:0) { .yourstellarlayer{ background-attachment: scroll; } }
希望能帮助到你！
我遇到了与Chrome相同的问题，它似乎是一个错误，当页面内部发生太多时，我可以通过将下面的转换代码添加到固定位置元素来修复它（ transform: translateZ(0);-webkit-transform: translateZ(0); ）强制浏览器使用硬件加速访问设备的graphics处理单元（GPU）使像素飞行。 另一方面，Web应用程序运行在浏览器的上下文中，这使软件可以执行大部分（如果不是全部）的渲染，从而导致转换的function减弱。 但是networking一直在追赶，大多数浏览器厂商现在都通过特定的CSS规则来提供graphics硬件加速。
使用-webkit-transform：translate3d（0,0,0）; 将启动GPU进行CSS转换，使其更平滑（更高的FPS）。
注意： translate3d（0,0,0）根据所看到的不做任何事情。 它将对象在x，y和z轴上移动0px。 这只是一个强制硬件加速的技术。
#element { position: fixed; /* MAGIC HAPPENS HERE */ transform: translateZ(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); -webkit-transform: translateZ(0); -webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/ }
对我来说，问题是样式附加到具有固定背景的div的父元素，我把-webkit-backface-visibility: inherit; 我的固定div的两个主要的父母。
在我的情况下，我正在使用基础的canvas，所以它是这样的
.off-canvas-wrap{ -webkit-backface-visibility:inherit; } .inner-wrap{ -webkit-backface-visibility:inherit; }
我们遇到类似的问题position: fixed; 元件。 这个元素包含一个相对定位的容器，包含一个绝对定位的图像。 在CSS转换时，图像消失，转换完成时重新出现。
我们试图通过将-webkit-backface-visibility为hidden在几个元素（包括body元素） -webkit-backface-visibility解决这个问题，但是这并没有帮助。 在这个线程的帮助下，我们使用Chrome的Web检查器来摆弄元素的position属性，幸运的是能够解决这个问题，而不必改变网站。 （我们所要做的就是将固定元素的父元素的位置改为static ）
这真的迷惑了我，它几乎毁了我的夜晚。 我的修复是设置
background-attachment: scroll;
它在我的项目上工作。
在此之前，我已经修好了。 希望这可以帮助。
我已经在popup窗口下的覆盖div（随机在歌剧20中消失）的问题 – 这两个animation，并通过脚本激活。
<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; }
我认为问题只在父元素的定位不明显时出现。
很高兴如果帮助任何人。 问候
在元素上添加任何标记的时刻，似乎是Chrome中的bug。 尝试从这样的元素中删除背景，并给它一个位置：相对。 在元素内部添加一个新的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内创build一个包装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>
我没有闪烁了，显然闪烁错误不下降到子容器。
这是一个解决scheme（2014.7.11）在Firefox 30.0，铬35.0，歌剧22.0，即11.0：
第1步 ： 在.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( '/publichttp://img.dovov.comstars.red.1.star.png', '/publichttp://img.dovov.comstars.red.2.star.png', '/publichttp://img.dovov.comstars.red.3.star.png', '/publichttp://img.dovov.comstars.red.4.star.png', '/publichttp://img.dovov.comstars.red.5.star.png', '/publichttp://img.dovov.comstars.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]); } }
PS谢谢Shawn Altman
我的任务是创build一个视差效果的页面。 试图通过CSS来解决这个问题后，我想出了以下解决scheme。
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将是具有固定背景附件的项目。
所以我在Chrome 40版上仍然看到这个问题。 目前正在为我工作的解决方法是通过创build一个内部div设置位置相对于该div，并使其适合其父级的高度，并在背景附加固定的父div上设置背景：
<section style="background-attachment: fixed;"> <div style="position: relative;"> // Code goes here including absolute posiioned elements </div> </section>
这个问题似乎发生在我的情况下，你有一个位置相对和背景附件固定在相同的元素。
希望这可以帮助。
我也有相同的问题在铬
这是非常简单的，不需要添加任何webkit和媒体标签只需按照以下步骤
1.取代背景：url（'path-to-image'）像下面那样设置图像，并将位置设置为固定
2.它将工作在铬和IE浏览器
这是一个晚会派对，但一个惊人的发现，因为我可以看到主要是CSS框架用户，Bootstrap，基金会（其他人），有问题，我相信你们中的许多人也滚动到顶部的jsfunction，显示滚动到顶部button当用户开始向下滚动时，
如果你有这样的东西（Bootstrap有内置的）
.fade { opacity: 0; -webkit-transition: opacity .35s linear; -o-transition: opacity .35s linear; transition: opacity .35s linear; } .fade.in { opacity: 1; }
或者你正在显示一些元素通过，
-webkit-transition: opacity .35s linear; -o-transition: opacity .35s linear; transition: opacity .35s linear;
或者您正在向下滚动，通过js（animation.css，waypoints.js，velocity.js）添加任何types的元素或元素类，
如果可能的话从该元素中移除transition / class，或者在出现该元素时重新检查，以便修复摇摆不定的Chrome问题。
