web-dev-qa-db-de.com

Chrome Problem mit Hintergrundanhängen und positionsfesten Elementen

Ich hatte dieses Problem eine Weile und es scheint sich um einen Chrome Redraw-Fehler zu handeln, der nicht behoben wurde. Daher suche ich nach Korrekturen für Lücken.

Das Hauptproblem besteht darin, dass ein Element auf der Seite ein Hintergrundbild hat, das Folgendes verwendet:

background-attachment: fixed;

Wenn ein anderes Element repariert ist und ein untergeordnetes Videoelement enthält, wird das Element mit dem Hintergrundbild ausgeblendet.

Jetzt funktioniert es gut in Safari (und Firefox und IE), es ist also nicht gerade ein Webkit-Problem. Ich habe mehrere Eigenschaften angewendet, die ohne Erfolg vorgeschlagen wurden.

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

Erstes Demo

Gegenwärtig ist meine Lösung nur, die Elemente mit einem festen Hintergrundbild über eine Medienabfrage auszurichten und die feste Hintergrundeigenschaft zu deaktivieren.

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

Irgendwelche Ideen?

Aktualisieren

Working Demo danke an Daniel.

Update 2

Bessere Demo!

Shoutout to irgendwann und FourKitchens Blog Post

34
Alex

Fanden diese Lösung auf: https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property

Scheint mir eine clevere Art zu sein: Vor Pseudoelement. Begrenzen Sie die Breite für Elemente mit fester Breite, eignet sich jedoch hervorragend für Seiten mit voller Breite. Im Wesentlichen sieht das so aus:

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

Funktioniert gut für mich, um diesen nervigen Bug zu umgehen.

8
somesayinice

Da ein fest positionierter Hintergrund in Chrome scheinbar grundlos beschädigt ist, können Sie möglicherweise versuchen, mit den Eigenschaften clip und position:fixed Herumzuspielen. Es ist nicht sehr bekannt, aber die Clip-Eigenschaft, wenn sie auf ein absolut positioniertes Element gesetzt ist, schneidet sogar fixed positionierte untergeordnete Elemente zu.

Es gibt jedoch einige Nachteile. Am wichtigsten ist jedoch, dass dieser Trick unter iOS aus irgendeinem Grund nicht einwandfrei funktioniert, während der Browser Probleme hat, das gesamte Bild zu rendern, während der Benutzer einen Bildlauf ausführt (Sie erhalten irgendwie einen Pop-in-Effekt). Es ist nicht etwas übermäßig Wichtiges, aber vielleicht etwas, das Sie in Betracht ziehen sollten. Natürlich können Sie dies immer noch umgehen, indem Sie zum Beispiel ein cleveres Javascript verwenden, das auf einen festen Hintergrund zurückgreift. Eine andere iOS-Problemumgehung besteht darin, lediglich -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%) zu verwenden, was im Grunde eine Webkit-spezifische Alternative für clip: rect(auto,auto,auto,auto) ist (d. H. Alles außerhalb des Containers beschneiden).

Ich habe ein JSFiddle (Codepen wollte nicht mit mir spielen) Implementierungsbeispiel erstellt, wie Sie dies tun können. Sehen Sie sich speziell .moment, .moment-image Und den neuen .moment-clipper An.

Ich hoffe das hilft!

Update: Clip wird jetzt zugunsten von Clip-Path nicht mehr unterstützt, wird jedoch zum Zeitpunkt des Schreibens in allen Browsern unterstützt. Der gleiche Effekt kann jedoch erzielt werden mit:

-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 Wird für den Container nicht mehr benötigt. Die Unterstützung für Clip-Pfade scheint relativ begrenzt zu sein. Derzeit wird nur Chrome und Safari mit Präfixen unterstützt. Am sichersten ist es, wenn Sie sowohl Clip als auch Clip-Pfad angeben, da diese nicht angezeigt werden sich gegenseitig stören.

Ich habe die Geige oben aktualisiert, um auch den Clip-Pfad einzuschließen.

34
Daniel Perván

Wie am dieser großartige Stift von Raphael Rychetsky zu sehen ist, könnte translate3d Der Unruhestifter sein.

Wenn Sie transform: translate3d(0,0,0) verwenden, versuchen Sie, es durch transform: translate(0,0) zu ersetzen, und es sollte den Trick tun. Zumindest hat es bei mir geklappt.

2
Hugo H

Eine späte Antwort, aber ich kam damit herum und irgendwie habe ich einen Hack für diesen gemacht.

Die Idee war, ein inneres Element zu schaffen, das das Hintergrundbild enthält und genauso wirkt wie background-attachment:fixed Eigentum.

Da diese Eigenschaft die Hintergrundbildposition relativ zum Fenster festlegt, müssen wir das innere Element in seinem Container verschieben. Auf diese Weise erhalten wir diesen Effekt.

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

Hallo, es ist sehr einfach, kein Webkit und kein Media-Tag hinzuzufügen. Befolgen Sie einfach die nachstehenden Anweisungen

  1. schritte Ich habe das Hintergrund-URL-Tag im unteren Container entfernt

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

  1. ich fügte img src-Tag in class = "container" und Position als fest und top = 0

enter image description here Jetzt funktioniert es in Chrome-40 und IE

1
Arul Sidthan

Mein Problem war, dass ich 3D Transformation Hover Div im Dokument animiert habe

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

Jedes Mal, wenn ich die Animation starte, verschwindet das feste Bild.

Die Lösung war einfach:

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

Dabei ist XX höher als der Z-Index des Bildes mit fester Position.

0
totem

Dieses Problem tritt normalerweise aufgrund von HTML5-Videos auf. Wickeln Sie es einfach in ein dom-Element mit folgenden Stilregeln ein: relative; und Überlauf: versteckt; Dies wird alles in allen Browsern beheben!

0
Andris

Ich habe eine Lösung gefunden von https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/

In meinem Fall geben Sie diese Eigenschaft einfach in das div des festen Hintergrunds ein.

will-change : transform;
0