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

Question

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

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

background-attachment: fixed;

如果另一个元素被修复并且有一个子视频元素，则会导致带有背景图像的元素消失。

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

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

Initial Demo

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

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

任何想法？

更新

Working Demo感谢Daniel。

更新2

Better demo!

留言至somesayinice和FourKitchens blog post

Answer 1

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

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

我做了一个JSFiddle（codepen不想和我一起玩）的实现示例，说明如何做到这一点。请特别注意.moment，.moment-image和新.moment-clipper。

我希望这有一些帮助！

更新：现在不推荐使用剪辑以支持剪辑路径，但在所有浏览器中仍然支持写入。然而，可以通过以下方式实现相同的效果：

-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: absolute。对剪辑路径的支持似乎相对有限，只有Chrome和Safari目前支持前缀。最安全的赌注可能包括剪辑和剪辑路径，因为它们似乎不会相互干扰。

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

Answer 2

在https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property

上找到此解决方案

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

.background_fill {
  overflow: hidden;
  position: relative;
    color: red;
}
.background_fill:before {
  background-color: white;
  background-size: cover;
  z-index: -3;
  content: " ";
  position: fixed;
  background: url('http://www.lausanneworldpulse.com/pdfs/brierley_map_0507.jpg') no-repeat center center;
  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>

对我来说很有用，可以解决这个非常烦人的错误。

Answer 3

一个迟到的答案，但我带着这个来到这里，不知怎的，我为这个做了一个黑客。

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

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

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()
    });
});

Answer 4

正如this great pen Raphael Rychetsky所见，translate3d可能是麻烦制造者。

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

Answer 5

嗨，这很简单，无需添加任何webkit＆amp;媒体标签只需按照以下

1. 步骤我删除了下面容器中的后台Url标记

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

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

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

Answer 6

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

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

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

解决方案很简单：

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

XX 高于固定位置图片的z-index。

Answer 7

由于HTML5视频，通常会出现此问题。只需将它包装在带有样式规则位置的dom元素中：relative;溢出：隐藏;这将修复所有浏览器中的所有内容！

Answer 8

我从https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/

找到了解决方案

在我的情况下，只需将此属性提供给固定背景的div。

will-change : transform;