web-dev-qa-db-ja.com

Chromeバックグラウンドアタッチメントの固定要素と位置固定要素の問題

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

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

background-attachment: fixed;

別の要素が修正され、子ビデオ要素がある場合、背景画像を含む要素が消えます。

Safari（およびFirefoxとIE）で正常に動作するようになったため、Webkitの問題ではありません。役に立たないことが示唆されているいくつかのプロパティを適用しました。

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

初期デモ

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

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

何か案は？

更新

Working Demo Danielに感謝します。

更新2

より良いデモ！

somesayinice および FourKitchensのブログ投稿 へのコメント

cssgoogle-chromewebkitfixedbackground-attachment
34
Alex

このソリューションは次の場所にあります： 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-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>

この非常に迷惑なバグを回避する方法として、私には最適です。

8
somesayinice

Chromeでは固定された背景が理由なく壊れているように見えるので、clipおよび_position:fixed_プロパティを試してみてください。あまりよく知られていませんが、絶対配置された要素に設定された場合、クリッププロパティは実際に配置された子要素をトリミングfixedします。

ただし、いくつかの欠点があります。最も重要なことは、残念ながら、このトリックは何らかの理由でiOSでは完璧に機能しませんが、ブラウザはユーザーがスクロールしている間に画像全体をレンダリングするのに問題があります（ちょっと（ポップイン効果））。それはあまりにも大きなものではありませんが、おそらくあなたが考慮すべきものです。もちろん、たとえば固定の背景にフォールバックする巧妙なjavascriptを使用することで、この問題を回避できます。 iOSの別の回避策は、基本的に-webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%)のWebkit固有の代替であるclip: rect(auto,auto,auto,auto)を使用することです（つまり、コンテナの外ですべてをトリミングします）。

JSFiddle （codepenは私と遊びたくありませんでした）実装例を作成し、これを実現しました。特に_.moment_、_.moment-image_、および新しい_.moment-clipper_を見てください。

これが助けになることを願っています！

更新：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: absolute_は不要になりました。クリップパスのサポートは比較的制限されているようで、ChromeとSafariは現在プレフィックスでサポートしています。最も安全な方法は、表示されないため、クリップとクリップパスの両方を含めることです。互いに干渉します。

上記のフィドルを更新して、クリップパスも含めました。

34
Daniel Perván

this great pen by Raphael Rychetsky で見られるように、_translate3d_がトラブルメーカーかもしれません。

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

2
Hugo H

遅い答えですが、私はこれをやって来て、どういうわけかこのハックを作りました。

アイデアは、背景画像を保持し、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()
    });
});
2
Burimi

こんにちは、非常に簡単です。ウェブキットとメディアタグを追加する必要はありません

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

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

  1. class = "container"にimg srcタグを追加し、fixedおよびtop = 0として位置付けます

enter image description here クロム-40とIEで動作するようになりました

1
Arul Sidthan

私の問題は、ドキュメント内の3D変換ホバーdivをアニメーション化したことです

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

アニメーションを実行するたびに、固定画像が消えていました。

解決策は簡単でした：

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

[〜＃〜] xx [〜＃〜]は、固定位置画像のz-indexよりも高い値です。

0
totem

この問題は通常、HTML5ビデオが原因で発生します。スタイリングルールの位置でdom要素にラップするだけです。およびオーバーフロー：非表示;これにより、すべてのブラウザのすべてが修正されます！

0
Andris

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

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

will-change : transform;
0
Christian Rosandhy