35

私はしばらくこの問題を抱えていましたが、修正されていない Chrome の再描画バグのようです。だから私は一時しのぎの修正を探しています。

主な問題は、ページ上の要素に以下を使用する背景画像がある場合です。

background-attachment: fixed;

別の要素が修正され、子 video 要素がある場合、背景画像を持つ要素が非表示になります。

現在は Safari (および Firefox と IE) で正常に動作するため、正確には Webkit の問題ではありません。提案されたいくつかのプロパティを無駄に適用しました。

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

初期デモ

現在、私の解決策は、メディアクエリを介して固定背景画像で要素をターゲットにし、固定背景プロパティをオフにすることです。

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

何か案は？

アップデート

ダニエルのおかげで動作するデモ。

更新 2

より良いデモ！

somesayiniceとFourKitchens のブログ投稿に感謝します。

4

8 に答える 8

8

このソリューションを見つけた: https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property

: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>

この非常に厄介なバグを回避する方法として、私にとってはうまく機能します。

于 2015-07-24T15:46:43.100 に答える
2

Raphael Rychetskyによるこの偉大なペンに見られるように、トラブルメーカーかもしれません。translate3d

を使用している場合はtransform: translate3d(0,0,0)、に置き換えてみてtransform: translate(0,0)ください。うまくいくはずです。少なくとも私にとってはうまくいきました。

于 2015-03-10T15:19:10.057 に答える
2

遅い答えですが、私はこれを思いついたので、どういうわけかこれをハックしました。

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()
    });
});
于 2014-07-04T13:37:25.983 に答える
1

こんにちは、ウェブキットとメディアタグを追加する必要はありません。以下に従ってください。

  1. コンテナの下にある背景の Url タグを削除しました

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

  1. class="container" に img src タグを追加し、位置を固定して top=0 にしました

ここに画像の説明を入力 現在、chrome-40 と IE で動作しています

于 2015-02-25T13:21:39.877 に答える
0

https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/から解決策を見つけました

私の場合、このプロパティを固定背景の div に渡すだけです。

will-change : transform;
于 2017-07-12T02:22:43.053 に答える