我目前正在做一个视差网站主题。背景图像需要固定为某些'div'和'section'附加，以避免jquery沉迷于所有内容。问题是任何动画项目下方的标签的背景图像在转换完成时都会消失，仅在 Google Chrome 上。补救？
问问题
90196 次
17 回答
65
这是一个非常普遍的未解之谜。最近我遇到了同样的问题，并且“-webkit-backface-visibility: hidden”被证明是没用的（在我的“固定”附加背景上），因为背景在设置时就消失了。（附加信息：原因是当背景设置为固定时，几乎类似于在背景中放置一个固定的'div'并将原始div背景设置为透明。隐藏的背面很明显）。
要解决当前的问题，请尝试将元素的“位置”属性设置为“静态”，或者如果您给它设置了其他值，即“相对”、“固定”或“绝对”，只需将其删除即可。
如果您不记得设置位置属性，并且问题仍然存在，我的建议是您使用 chrome 或 firefox 上的调试工具，以
确保除了“静态”之外没有手动设置“位置”属性的值。
只花了半个小时搜索......认为这可以让你更容易......问候。:)
于 2013-11-30T06:33:32.547 回答
34
这里同样的问题。我在 PC Chrome 34 中有一个使用闪烁的粘性标题position:fixed;。我尝试了这个线程中的解决方案，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属性创建一个图层！
W3 规范
CanIUse
MDN 定义
element {
position:fixed;
top:0;
left:50%;
width:960px;
height:50px;
margin-left:-480px;
will-change:top;
/* ...all other CSS... */
}
老实说，这似乎是一个奇怪的解决闪烁的解决方案，但本质上它使元素成为一个层，与 translate3d() 相同。
于 2014-04-22T15:16:12.890 回答
16
回答可能有点晚了，但似乎该错误来自背景附件：chrome 中的固定属性。我找到了一个将其值更改为“滚动”的解决方案。它会在 firefox 上造成 jitterin 效果，但您可以使用 CSS 中的媒体浏览器查询来避免它，如下所示：
.yourstellarlayer{
background-attachment: fixed;
}
/*only for webkit browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.yourstellarlayer{
background-attachment: scroll;
}
}
希望能帮助到你！
于 2013-12-03T05:43:02.520 回答
8
我在 Chrome 上遇到了同样的问题，这似乎是当页面内部发生太多事情时发生的错误，我能够通过将以下转换代码添加到固定位置元素来修复它，（transform: translateZ(0);-webkit-transform: translateZ(0);）强制浏览器使用硬件加速来访问设备的图形处理单元 (GPU) 以使像素飞行。另一方面，Web 应用程序在浏览器的上下文中运行，这使软件可以完成大部分（如果不是全部）渲染，从而减少了转换的动力。但是 Web 一直在迎头赶上，现在大多数浏览器供应商都通过特定的 CSS 规则提供图形硬件加速。
使用-webkit-transform: translate3d(0,0,0); 将为 CSS 过渡启动 GPU，使它们更平滑（更高的 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*/
}
于 2014-09-18T21:39:01.603 回答
5
这真的让我很烦，几乎毁了我的夜晚。我的解决方法是设置
background-attachment: scroll;
它适用于我的项目。
在此之前，我已将其固定。希望这可以帮助。
于 2015-08-14T07:47:30.103 回答
4
对我来说，问题是附加到具有固定背景的 div 的父元素的样式，我将其放在-webkit-backface-visibility: inherit;固定 div 的两个主要父元素上。
就我而言，我使用的是画布外的基础，所以它是这样的
.off-canvas-wrap{
-webkit-backface-visibility:inherit;
}
.inner-wrap{
-webkit-backface-visibility:inherit;
}
于 2015-01-21T01:35:41.743 回答
3
position: fixed;我们在元素上遇到了类似的问题。该元素包含一个相对定位的容器，其中包含一个绝对定位的图像。在 CSS 过渡时，图像消失了，过渡完成后重新出现。
我们尝试通过在包括 body 元素在内的几个元素上设置-webkit-backface-visibilityto 来解决问题hidden，但这并没有帮助。在这个线程的帮助下，我们使用 Chrome 的 web 检查器来处理 elments 的position属性，幸运的是能够解决问题，而无需对网站进行太多改动。（我们所要做的就是将固定元素的父元素的位置更改为static）
于 2014-02-18T12:11:49.523 回答
2
未来将近 5 年的更新......这似乎仍然是 chrome 的问题。我已经尝试了提到的大多数解决方案，包括添加：
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
它并没有解决口吃问题。添加background-attachment: scroll消除了对网站用户体验至关重要的视差效果。上面提到添加父元素的解决方案对我来说没有任何改变。最近有这个问题的人有什么其他想法吗？我在前端使用 Gatsby(React)。
于 2018-12-30T13:51:02.267 回答
1
这是一个适用于 Firefox 30.0、chrome 35.0、opera 22.0 即 11.0 的解决方案（2014.7.11）：
第 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
STEP 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]);
}
}
PS感谢肖恩奥特曼
于 2014-07-11T06:40:11.150 回答
1
我的任务是创建一个具有视差效果的页面。在尝试通过 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 将是固定背景附件的项目。
于 2014-09-02T17:01:33.850 回答
1
所以我在 Chrome 版本 40 上仍然看到这个问题。目前对我有用的解决方法是在该 div 上创建一个相对于该 div 的内部 div 设置位置，并使其适合其父级的高度，并在父级 div 上设置背景，背景附件为固定：
<section style="background-attachment: fixed;">
<div style="position: relative;">
// Code goes here including absolute posiioned elements
</div>
</section>
在我的情况下，当您将相对位置和背景附件固定在同一元素上时，似乎会出现问题。
希望这可以帮助。
于 2015-01-22T16:46:55.610 回答
1
我在 chrome 中也有同样的问题
非常简单，无需添加任何 webkit 和媒体标签，只需按照以下步骤操作
1. 而不是 background:url('path-to-image') 像下面这样设置图像并将位置设置为固定
2.它可以在chrome和IE浏览器中运行
于 2015-02-25T13:34:59.027 回答
1
这个聚会迟到了，但是一个惊人的发现，因为我可以看到大多数 css 框架用户，Bootstrap，Foundation (others)，有问题，我相信你们中的许多人也有滚动到顶部的 js 功能，显示滚动到顶部按钮当用户开始向下滚动时，
如果你有这样的东西（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）添加任何带有 transition 的元素或元素类（
如果可能的话）从该元素中删除过渡/类，或者重新检查该元素何时按顺序出现修复不稳定的 Chrome 问题。
于 2015-09-01T23:20:55.523 回答
1
将transform属性添加到具有固定背景图像的元素中。你可以有任何固定的位置。
#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);
}
于 2018-06-11T19:28:37.343 回答
0
我在弹出窗口下方的覆盖 div 上遇到了这个问题（在歌剧 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;
}
我认为只有在父元素的定位不明显时才会出现问题。
很高兴帮助任何人。问候
于 2014-04-22T09:02:27.130 回答
0
当您在元素上添加任何标记时，似乎在 Chrome 中出现错误。尝试从这样的元素中删除背景并给它一个位置：相对的。在元素内部添加一个具有您需要的尺寸的新 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>
希望能帮助到你！
于 2014-05-05T16:45:20.813 回答
0
如果你必须有 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>
我不再有闪烁，显然闪烁错误不会下降到子容器。
于 2014-06-19T15:34:20.237 回答