CSS 背景附件固定和位置固定元素的 Chrome 问题

Chrome issue with background-attachment fixed and position fixed elements

提问by Alex

I've had this issue for a while and it seems to be a Chrome redraw bug that hasn't been fixed. So I'm looking for any stop-gap fixes.

我遇到这个问题已经有一段时间了，它似乎是一个尚未修复的 Chrome 重绘错误。所以我正在寻找任何权宜之计。

The main issue is that when an element on the page has a background image that uses:

主要问题是，当页面上的元素具有使用以下内容的背景图像时：

background-attachment: fixed;

If another element is fixed and has a child video element it causes the element with the background image to disappear.

如果另一个元素是固定的并且有一个子视频元素，它会导致带有背景图像的元素消失。

Now it works fine in Safari (and Firefox and IE) so it's not exactly a webkit issue. I've applied several properties that have been suggested to no avail.

现在它在 Safari（以及 Firefox 和 IE）中运行良好，所以它不完全是 webkit 问题。我已经应用了几个被建议无济于事的属性。

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);

Initial Demo

初始演示

Currently my solution is just to target the elements with a fixed bg image via a media query and just turn off the fixed background property.

目前我的解决方案只是通过媒体查询使用固定的 bg 图像定位元素，然后关闭固定的背景属性。

@media screen and (-webkit-min-device-pixel-ratio:0) {
background-attachment: scroll;
}

Any ideas?

有任何想法吗？

Update

更新

Working Demothanks to Daniel.

工作演示感谢丹尼尔。

Update 2

更新 2

Better demo!

更好的演示！

Shoutout to somesayiniceand FourKitchens blog post

向somesayinice和FourKitchens 博客文章大喊大叫

采纳答案by somesayinice

Found this solution on: https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property

在以下位置找到此解决方案：https: //fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property

Seems to me to be a clever way to use :before pseudo element. Limit the width for fixed width elements but works great for full width pages. Essentially comes out to look like this:

在我看来，使用 :before 伪元素是一种聪明的方法。限制固定宽度元素的宽度，但适用于全宽页面。基本上看起来像这样：

.background_fill {
  overflow: hidden;
  position: relative;
    color: red;
}
.background_fill:before {
  background-color: white;
  background: url('http://www.lausanneworldpulse.com/pdfs/brierley_map_0507.jpg') no-repeat center center;
  background-size: cover;
  z-index: -3;
  content: " ";
  position: fixed;
  will-change: transform;
  width: 100%;
  height: 100%;
}

<div class="background_fill">
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
</div>

Works great for me as a way of getting around this very annoying bug.

作为绕过这个非常烦人的错误的一种方式，对我来说非常有用。

回答by Daniel Perván

Since a fixed positioned background seems to break for no reason in Chrome, you can potentially try playing around with the clipand position:fixedproperties. It's not very well known, but the clip property when set on an absolute positioned element will actually even crop fixedpositioned child elements.

由于固定定位的背景在 Chrome 中似乎无缘无故地中断，因此您可以尝试使用clip和position:fixed属性。它不是很出名，但是在绝对定位元素上设置的 clip 属性实际上甚至会裁剪固定定位的子元素。

There are some drawbacks, however. Most importantly, this trick sadly doesn't work flawlessly on iOS for some reason, whereas the browser has troubles rendering the entire image while the user is scrolling (you kinda get a pop-in effect). It's not something overly major, but perhaps something you should take in regard. Of course, you can still work around this by using for example some clever javascript that falls back to a fixed background. Another iOS workaround is by merely using -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%)which is basically a webkit-specific alternative for clip: rect(auto,auto,auto,auto)(i.e. crop everything outside the container).

但是，也有一些缺点。最重要的是，由于某种原因，这个技巧在 iOS 上不能完美地工作，而浏览器在用户滚动时呈现整个图像时遇到了麻烦（你有点弹出效果）。这不是什么过分重要的事情，但也许您应该考虑一下。当然，您仍然可以通过使用例如一些回退到固定背景的聪明的 javascript 来解决这个问题。另一个 iOS 解决方法是仅使用-webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%)它基本上是特定于 webkit 的替代方案clip: rect(auto,auto,auto,auto)（即裁剪容器外的所有内容）。

I made a JSFiddle(codepen didn't want to play with me) implementation example for how you can do this. Look specifically at .moment, .moment-imageand the new .moment-clipper.

我制作了一个JSFiddle（codepen 不想和我一起玩）实现示例来说明如何做到这一点。具体看看.moment，.moment-image和新的.moment-clipper。

I hope this is of some help!

我希望这会有所帮助！

Update: Clip is now deprecated in favour of clip-path, but is as of writing still supported in all browsers. The same effect can however be achieved with:

更新：Clip 现在已被弃用，取而代之的是 clip-path，但截至撰写本文时，所有浏览器仍支持它。但是，可以通过以下方式实现相同的效果：

-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
overflow: hidden;

position: absoluteis no longer required on the container. Support for clip-path seems to be relatively limited, with only Chrome and Safari currently supporting it with prefixes. The safest bet is probably to include both clip and clip-path since they don't appear to interfere with each other.

position: absolute容器上不再需要。对剪辑路径的支持似乎相对有限，目前只有 Chrome 和 Safari 支持带前缀的。最安全的选择可能是同时包含剪辑和剪辑路径，因为它们似乎不会相互干扰。

I've updated the fiddle above to also include clip-path.

我已经更新了上面的小提琴，还包括剪辑路径。

回答by Hugo H

As seen on this great penby Raphael Rychetsky, translate3dmay be the troublemaker.

正如拉斐尔·雷切茨基（Raphael Rychetsky）在这支伟大的笔上所看到的那样，translate3d可能是麻烦制造者。

If you use transform: translate3d(0,0,0), try replacing it by transform: translate(0,0)and it should do the trick. At least it worked for me.

如果您使用transform: translate3d(0,0,0)，请尝试将其替换为transform: translate(0,0)，它应该可以解决问题。至少它对我有用。

回答by Burimi

A late answer but I came around with this and somehow I made a hack for this one.

一个迟到的答案，但我想到了这个，不知何故我为这个做了一个黑客。

The idea was to create an inner element which will hold the background-image and will act same as background-attachment:fixedproperty.

这个想法是创建一个内部元素，它将保存背景图像并与background-attachment:fixed属性相同。

Since this property makes the background image position relative to the window we have to move the inner element within it's container and this way we will get that effect.

由于此属性使背景图像相对于窗口的位置，我们必须在其容器内移动内部元素，这样我们将获得该效果。

var parallax_container = $(".parallax_container");
/*Create the background image holder*/
parallax_container.prepend("<div class='px_bg_holder'></div>");
$(".px_bg_holder").css({
    "background-image" : parallax_container.css("background-image"), /*Get the background image from parent*/
    "background-position" : "center center",
    "background-repeat" : "no-repeat",
    "background-size" : "cover",
    "position" : "absolute",
    "height" : $(window).height(), /*Make the element size same as window*/
    "width" : $(window).width()
});
/*We will remove the background at all*/
parallax_container.css("background","none");
parallax_container.css("overflow","hidden");/*Don't display the inner element out of it's parent*/
$(window).scroll(function(){
    var bg_pos = $(window).scrollTop() - $(".parallax_container").offset().top; /*Calculate the scrollTop of the inner element*/
    $(".px_bg_holder").css({
        "margin-top" : bg_pos+"px"
    });
});
$(window).resize(function(){
    $(".px_bg_holder").css({
        "height" : $(window).height(),
        "width" : $(window).width()
    });
});

回答by Arul Sidthan

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

嗨，这非常简单，无需添加任何 webkit 和媒体标签，只需按照以下步骤操作即可

1. steps I removed the background Url tag in below container

1. 我在下面的容器中删除了背景 Url 标签的步骤

.content .container { /* background: url(http://beeverlyfields.com/wp-content/uploads/2015/02/bgBeeverly4.jpg); */

.content .container { /* 背景：url( http://beeverlyfields.com/wp-content/uploads/2015/02/bgBeeverly4.jpg); */

1. i added img src tag in class="container" and position as fixed and top=0

2. 我在 class="container" 中添加了 img src 标签，并将其定位为 fixed 和 top=0

now its working in chrome-40 and IE

现在它在 chrome-40 和 IE 中工作

回答by Andris

This problem usually appears because of HTML5 video. Just wrap it in dom element with styling rules position: relative; and overflow:hidden; This will fix everything in all browsers!

这个问题通常是由 HTML5 视频引起的。只需将其包装在具有样式规则的 dom 元素中 position:relative; 和溢出：隐藏；这将解决所有浏览器中的所有问题！

回答by Christian Rosandhy

I've found solution from https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/

我从https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/找到了解决方案

In my case, just give this property into the fixed background's div.

就我而言，只需将此属性放入固定背景的 div 中即可。

will-change : transform;

回答by totem

My problem was I have animated 3d transform hover div in document

我的问题是我在文档中有动画 3d 变换悬停 div

.anim-y360:hover {
    -webkit-transform: rotateY(360deg);
    ...
}

Every time I run the animation the fixed image was disappearing.

每次运行动画时，固定图像都会消失。

The solution was simple:

解决方法很简单：

.anim-y360 {   
   z-index: XX;
   ...
}

Where XXis higher than the fixed position image's z-index.

其中XX高于固定位置图像的 z-index。