it-swarm.com.de

Problem mit dem Flimmern/Verschwinden von Hintergrund-Hintergrundbildern in Chrom, wenn mit einer CSS-Transformation gekoppelt

Ich mache gerade ein Parallax-Website-Theme. Die Hintergrundbilder müssen für bestimmte 'div' - und '' - Abschnitte fix befestigt werden, um zu vermeiden, dass sich Jquery in alles einfügt. Das Problem bestand darin, dass die Hintergrundbilder der Tags unter allen animierten Elementen verschwanden, während die Transformation durchgeführt wurde, nur bei Google Chrome. Abhilfe?

41
BlackPanther

Dies war ein sehr verbreitetes ungelöstes Rätsel. Vor kurzem hatte ich das gleiche Problem, und "-webkit-backface-visible: hidden" erwies sich als wenig nutzlos (auf meinem "fixierten" angehängten Hintergrund), da der Hintergrund beim Einstellen einfach verschwunden war. (Zusätzliche Info: Der Grund ist, dass wenn der Hintergrund als fest eingestellt ist, es fast ähnlich ist, ein festes 'div' in den Hintergrund zu setzen und den ursprünglichen div-Hintergrund transparent zu machen. Verdeckte Rückseite macht das Offensichtliche) .

Um das aktuelle Problem zu lösen, setzen Sie die ' position ' - Eigenschaft des Elements auf ' static ' oder, wenn Sie einen anderen Wert angegeben haben, nämlich 'relative', 'fixed 'oder' absolute ', entfernen Sie diese einfach.

Wenn Sie sich nicht erinnern, die Positionseigenschaft festgelegt zu haben, und das Problem weiterhin bestehen bleibt, empfehle ich Ihnen, ein Debugging-Tool für Chrome oder Firefox zu verwenden 

Stellen Sie sicher, dass für die Eigenschaft 'position' keine anderen Werte als .__ festgelegt sind. 'statisch'.

Ich habe nur eine halbe Stunde mit der Suche verbracht ... Ich dachte, das könnte es Ihnen erleichtern ... Grüße. :)

63
BlackPanther

Selbes Problem hier. Ich hatte einen klebrigen Header mit position:fixed;, der in PC Chrome 34 flackerte. Ich habe die Lösungen in diesem Thread ausprobiert, position:static; in der übergeordneten Komponente brach andere Teile. Aber ich weiß, dass das Hinzufügen von -webkit-transform: translate3d(0,0,0); im Grunde dazu führt, dass Chrome diese HTML-Datei in eine Ebene umwandelt, so dass sie nicht neu gestrichen wird. Das hat bei mir funktioniert.

element {
  position:fixed;
  top:0;
  left:50%;
  width:960px;
  height:50px;
  margin-left:-480px;
  -webkit-transform: translate3d(0,0,0);
  /* ...all other CSS... */
}

UPDATE
zukunftsfreundliche Antwort ist die Verwendung der will-change-Eigenschaft zum Erstellen einer Ebene!
W3-Spezifikationen
Kann ich benutzen
MDN-Definition

element {
      position:fixed;
      top:0;
      left:50%;
      width:960px;
      height:50px;
      margin-left:-480px;
      will-change:top;
      /* ...all other CSS... */
    }

Und ich bin ehrlich, dies scheint eine seltsame Lösung zu sein, um das Flimmern zu beheben, aber im Wesentlichen wird das Element zu einer Ebene, genau wie translate3d ().

32
Jason Lydon

Vielleicht etwas spät, um zu antworten, aber es scheint, dass der Fehler mit dem Hintergrund-Anhang kommt: Feste Eigenschaft in Chrom. Ich habe eine Lösung gefunden, die ihren Wert in "Scrollen" ändert. Dies verursacht einen Jitterin-Effekt auf Firefox. Sie können dies jedoch vermeiden, indem Sie in Ihrem CSS eine Abfrage des Medienbrowsers verwenden.

.yourstellarlayer{
     background-attachment: fixed;
}
/*only for webkit  browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .yourstellarlayer{ 
        background-attachment: scroll;
    }
}

Ich hoffe es hilft!

14
Santirisco

Ich hatte das gleiche Problem mit Chrome, es scheint ein Fehler zu sein, der auftritt, wenn auf der Seite zu viel los ist. Ich konnte das Problem beheben, indem der folgende Positionscode (transform: translateZ(0);-webkit-transform: translateZ(0);) dem festen Positionselement hinzugefügt wurde zwingt den Browser, die Hardwarebeschleunigung für den Zugriff auf die Grafikverarbeitungseinheit (GPU) des Geräts zu verwenden, um Pixel zum Fliegen zu bringen. Webanwendungen hingegen werden im Kontext des Browsers ausgeführt, wodurch die Software den Großteil (wenn nicht sogar das gesamte) Rendering ausführen kann, was zu einer geringeren Leistung für Übergänge führt. Das Web hat jedoch aufgeholt, und die meisten Browseranbieter bieten jetzt grafische Hardwarebeschleunigung mithilfe bestimmter CSS-Regeln an.

Mit -webkit-transform: translate3d (0,0,0); wird die GPU für die CSS-Übergänge in Aktion treten und sie glatter machen (höhere FPS).

Hinweis: translate3d (0,0,0) wirkt sich nicht auf das aus, was Sie sehen. Es verschiebt das Objekt um 0px in x-, y- und z-Achse. Es ist nur eine Technik, um die Hardwarebeschleunigung zu erzwingen.

#element {
    position: fixed;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}
8
Neo

Das hat mich wirklich geärgert und meine Nacht fast ruiniert. Mein Fix ist zu setzen 

background-attachment: scroll;

Es hat an meinem Projekt gearbeitet.
Davor hatte ich es behoben. Hoffe das hilft. 

4
Ming Huang

Für mich waren die Stile die Elternelemente des div, die den festen Hintergrund haben, und ich -webkit-backface-visibility: inherit; zu den beiden Haupteltern meines festen div.

in meinem Fall habe ich Foundation off-canvas verwendet, also geht es so

.off-canvas-wrap{
    -webkit-backface-visibility:inherit;
}

.inner-wrap{
    -webkit-backface-visibility:inherit;
}
4
Fabian Rios

Wir hatten ein ähnliches Problem mit einem position: fixed;-Element. Dieses Element enthielt einen relativ positionierten Behälter mit einem absolut positionierten Bild. Bei einem CSS-Übergang verschwand das Bild, wenn der Übergang abgeschlossen wurde.

Wir haben versucht, das Problem zu lösen, indem wir -webkit-backface-visibility auf hidden für mehrere Elemente gesetzt haben, einschließlich des body-Elements. Dies half jedoch nicht. Mit Hilfe dieses Threads haben wir den Webinspektor von Chrome verwendet, um mit den position -Eigenschaften von elments herumzuspielen und konnten glücklicherweise das Problem lösen, ohne die Site so sehr zu ändern. (wir mussten nur die Position des übergeordneten Elements des festen Elements in static ändern.)

3
lmeurs

ich hatte auch die gleichen Probleme in Chrom 

es ist sehr einfach, kein Webkit- und Medien-Tag hinzuzufügen. Befolgen Sie die folgenden Schritte

1. anstelle des Hintergrunds: URL ('Pfad-zu-Bild') setzt das Bild wie folgt und setzt die Position als fest

2 . Es funktioniert sowohl in Chrome als auch im IE Browser 

1
Arul Sidthan

Ich bin also auf Chrome Version 40 und sehe dieses Problem immer noch. Der Workaround, der derzeit für mich funktioniert, besteht darin, eine innere div-Einstellungsposition relativ zu diesem div zu erstellen und an die Höhe des übergeordneten Elements anzupassen und den Hintergrund auf das übergeordnete div mit einem Hintergrundanhang von fix festzulegen:

<section style="background-attachment: fixed;">
 <div style="position: relative;">
  // Code goes here including absolute posiioned elements
 </div>
</section>

Das Problem scheint aufzutreten, wenn Sie in meinem Fall eine relative Position und eine Hintergrundanbringung auf demselben Element festgelegt haben.

Hoffe das hilft.

1
imdpk

Fügen Sie Ihrem Element die transform-Eigenschaft mit festem Hintergrundbild hinzu. Sie können eine beliebige Position haben.

#thediv {
    width: 100%;
    height: 600px;
    position: relative;
    display: block;
    background-image: url(https://cdn.shopify.com/s/files/1/1231/8576/files/hockeyjacket1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border: 10px solid black;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

https://jsfiddle.net/rkwpxh0n/2/

1
Digggid

Hier ist eine Lösung, die bei firefox 30.0, chrome 35.0, oper 22.0, dh 11.0 (2014.7.11) funktioniert:

SCHRITT 1: Fügen Sie diese Zeilen bei .htaccess hinzu:

# cache for images
<FilesMatch "\.(png)$">
Header set Cache-Control "max-age=10000, public"
</FilesMatch>

SCHRITT 2: Bilder vorladen, zum Beispiel:

var pics = []; // CREATE PICS ARRAY

$(document).ready(function(){
    ...
    preload(
        '/public/images/stars.red.1.star.png',
        '/public/images/stars.red.2.star.png',
        '/public/images/stars.red.3.star.png',
        '/public/images/stars.red.4.star.png',
        '/public/images/stars.red.5.star.png',
        '/public/images/stars.empty.png'
    );
    ...
    $('.rating').on('mousemove', function(event){
        var x = event.pageX - this.offsetLeft;
        var id = getIdByCoord(x); //
        if ($(this).data('current-image') != id) {
            $(this).css('background-image', 'url(' + pics[id].src + ')');
            $(this).data('current-image', id);
        }
    })
    ...
})

...

// PRELOAD FUNCTION TO SET UP PICS ARRAY IN MEMORY USING IMAGE OBJECT
function preload() {
    for (i = 0; i < arguments.length; i++) {
        pics[i] = new Image();
        pics[i].src = arguments[i];
        // alert("preload " + arguments[i]);
    }
}

P.S. Danke Shawn Altman

1
web.developer

Dies ist eine verspätete Party, aber eine erstaunliche Entdeckung. Wie ich sehen kann, haben meistens Benutzer des CSS-Frameworks Bootstrap, Foundation (andere) Probleme, und ich bin mir sicher, dass viele von Ihnen auch Scroll-to-Top-js-Funktionen haben, die Scroll zeigen nach oben, wenn der Benutzer nach unten scrollen beginnt, 

wenn Sie so etwas haben (Bootstrap hat es eingebaut) 

.fade {
    opacity: 0;
    -webkit-transition: opacity .35s linear;
    -o-transition: opacity .35s linear;
    transition: opacity .35s linear;
}
.fade.in {
    opacity: 1;
}

oder Sie zeigen ein Element über,

-webkit-transition: opacity .35s linear;
-o-transition: opacity .35s linear;
transition: opacity .35s linear;

oder Sie fügen eine beliebige Art von Element oder Elementklasse mit Übergang (beim Scrollen nach unten) über js (animation.css, waypoints.js, Velocity.js) hinzu.
Übergang/Klasse möglichst aus diesem Element entfernen oder erneut prüfen, wenn das Element angezeigt wird, um das abgehackte Chrome-Problem zu beheben. 

1
Benn

Meine Aufgabe war es, eine Seite mit einem Parallaxeffekt zu erstellen. Nach Versuchen, das Problem mit CSS zu beheben, kam ich zu folgender Lösung. 

JavaScript:

var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (isChrome)
{

    var itemArr = $('.slider-title');

    $(window).scroll(function()
    {
        var pos = $(window).scrollTop();
        var wh = window.innerHeight;

        $(itemArr).each(function(i, item){

            var p = $(item).position();
            var h = $(item).height();
            if (p.top + h > pos && p.top < pos+wh)
            {
                // items ir redzams
                var prc = (p.top - pos +h)/wh ;
                //console.log(prc);
                $(item).css({'background-position':'center '+prc+'%'});
            }

        });
    });

}

CSS:

    /*only for webkit  browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .slider-title{ 
        background-size:auto;
        background-position: center 0%;
    }
}

.slider-title wäre das Element mit Hintergrundanhang. 

1
Eriks Klotins

Eine andere Problemumgehung, wenn Sie eine Position haben müssen: Fixed/Relative/Absolute. Möglicherweise, weil Sie ein absolut positioniertes Element (wie in meinem Fall) enthalten, erstellen Sie ein Wrapper-Div im flackernden Div und verschieben die Position und die Hintergrundeigenschaft.

z.B.

sie hatten -

<div class="background-flickers' style="background:url('path-to-image'); position:relative">
 <absolutely positioned element>
</div>

Mögliche Problemumgehung

<div class="no-more-flicker!">
 <div class="wrapper" style="style="background:url('path-to-image'); position:relative">
  <absolutely positioned element>
 </div>
</div>

Ich habe das Flimmern nicht mehr, anscheinend geht der Flicker-Fehler nicht in untergeordnete Container über.

0
Vishu

Ein Update fast 5 Jahre in der Zukunft ... Dies scheint immer noch ein Problem mit Chrome zu sein. Ich habe die meisten der genannten Lösungen ausprobiert und Folgendes hinzugefügt: 

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

und es behebt nicht das stotternde Problem. Durch Hinzufügen von background-attachment: scroll wird der für die UX der Site entscheidende Parallaxe-Effekt entfernt. Die oben genannte Lösung erwähnt, dass das Hinzufügen eines übergeordneten Elements für mich nichts ändert. Irgendwelche anderen Ideen von Leuten, die dieses Problem in letzter Zeit hatten? Ich verwende Gatsby (React) im Frontend. 

0
Dmitriy

Scheint in Chrome einen Fehler zu verursachen, sobald Sie das Element mit Markierungen versehen. Entfernen Sie den Hintergrund von einem solchen Element und geben Sie ihm eine Position: relativ. Fügen Sie im Element ein neues div mit den benötigten Dimensionen hinzu und fügen Sie den Hintergrund hinzu. Fügen Sie einfach keine Markierungen hinzu.

Beispiel:

Aktuell:

<div class="container" style="background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
     <div class="example"></div>
</div>

Korrigiert:

 <div class="container" style="position:relative;">
     <div class="added-background" style="position:absolute;width:100%;height:100%;background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
     <div class="example"></div>
</div>

Ich hoffe es hilft!

0
Tatubolitex

Ich hatte dieses Problem mit dem Overlay-Div unterhalb des Popup-Fensters (zufällig in Oper 20 verschwunden) - sowohl animiert als auch per Skript aktiviert.

<div class="popupwrapper">
    <div id="popupdownload" class="popup">
        <h1>Test</h1>
    </div>
    <div class="popupoverlay"></div>
</div>

.popupwrapper {
display:            none;
z-index:            9100;
}
.popupwrapper.active {
display:            block;
}
.popupwrapper > div {
-webkit-transition: opacity 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
-moz-transition:    opacity 150ms ease-in-out, -moz-transform 150ms ease-in-out;
-ie-transition: opacity 150ms ease-in-out, -ie-transform 150ms ease-in-out;
transition:         opacity 150ms ease-in-out, transform 150ms ease-in-out;
}
.popupoverlay {
position:           absolute;
top:                0;
right:              0;
bottom:             0;
left:               0;
width:              100%;
height:             100%;
background:         rgba(26,26,26,.9);
opacity:            0;
}
.popup {
position:           fixed;
top:                30%;
left:               40%;
padding:            48px;
background:         #e6e6e6;
z-index:            9101;
-webkit-transform:  scale(1.6);
transform:          scale(1.6);
opacity:            0;
}
.popupoverlay.active {
opacity:            1;
}
.popup.active {
-webkit-transform:  scale(1);
transform:          scale(1);
opacity:            1;
}

Overlay wurde absolut positioniert (.popupoverlay), jedoch in einem Container, der in keiner Weise positioniert war. Ich habe die absolute Positionierung des Overlays in das übergeordnete Element (.popup) kopiert, und es funktioniert OK.

.popupwrapper {
position:           absolute;
top:                0;
right:              0;
bottom:             0;
left:               0;
width:              100%;
height:             100%;
display:            none;
z-index:            9100;
}

Ich denke, das Problem tritt nur auf, wenn die Positionierung von übergeordneten Elementen nicht offensichtlich ist.

Freut mich, wenn jemandem geholfen hat. Grüße