wake-up-neo.com

Weird CSS3 Transition (Flimmern)

Wenn ich zu meiner Schaltfläche schwebe, wird beim Übergang zuerst ein weißer Blitz ausgelöst. Warum flackert es irgendwie, wenn ich einen css3-Übergang auf meine Schaltfläche anwende? Mein Browser ist Google Chrome.

Siehe hier


<button>Log In</button>​

CSS:

button {
    background: #ff3019;
    background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
    background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    background: linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
    border:1px solid #890000;
    display:block;
    margin:0 auto;
    width:200px;
    padding:5px 0;
    border-radius:8px;
    color:#fff;
    font-weight:700;
    text-shadow:0 1px 1px #000+50;
    box-shadow:0 2px 3px #000+150;
    -webkit-transition:background linear .5s;
}
button:hover {
    background:#ff3019;
}
button:active {
    background:#cf0404;
}

Das

34
Jürgen Paul

Ich habe das Flackern los. Fügen Sie «-webkit-backface-visibility: hidden;» zu den Elementen hinzu, die Sie überführen. Voilà!

Miguel hat recht, was die Sicht nach hinten betrifft, um den störenden Blitz zu korrigieren. Ich verwende jedoch die Transformationsskala und die SVG-Animation wird nach der Skalierung nicht scharf sein. Es ist scharf, wenn Sie die Rücksichtbarkeit nicht verwenden.

Entweder haben Sie eine Nice-Animation mit einer verschwommenen Grafik oder eine Nice-Grafik mit Bildschirmblitzen.

Sie können jedoch die folgende Zeile zum übergeordneten Objekt des zu übergebenden Objekts hinzufügen. Dadurch wird das Blinken des Bildschirms behoben und die Grafik bleibt nach der Skalierung scharf.

-webkit-transform: translate3D(0, 0, 0);
9
JanTheHuman

Ich glaube, es ist derzeit ein Problem ohne Korrektur. Ich bin auch schon vor dem Herumspielen darauf gestoßen und konnte es nicht zum Laufen bringen. Die Verwendung einer Volltonfarbe scheint gut zu sein oder sie mit einem Hintergrundbild zu fälschen.

Ähnliche Frage hier: Webkit-Unterstützung für Farbverlaufsübergänge

Weitere Details: http://screenflicker.com/mike/code/transition-gradient/

4
Graham Conzett

Das Flimmern, das Sie bemerken, ist, dass die Hintergrundfarbe der Schaltfläche in transparent geändert wird (dh, die Schaltfläche blinkt oder wird in Ihrer Fiddle weiß, weil die Hintergrundfarbe des Körpers weiß ist).

Wenn Sie Ihre Schaltfläche über einem anderen Element mit der gleichen Größe/Höhe/Hintergrundfarbe (einschließlich Farbverläufen) überlagern, wird das "Flimmern" nicht wahrgenommen.

Schauen Sie sich hier ein Beispiel für Ihre Geige an: http://jsfiddle.net/hrDff/12/

Immer noch definitiv ein Fehler ...

1
Funktr0n

Dieser Link hat es für mich behoben. Sie müssen lediglich eine Zeile zur CSS des flimmernden Elements hinzufügen:

http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit

1
Dave

Mit einem ähnlichen Problem haben Jans Vorschläge zu einer Verbesserung für alle Hintergrundbilder beigetragen. Ich habe das Flackern des letzten durch zwei auffällige Positionierungsregeln aufgehoben. Ich hatte für eine position:static eine Regel margin-top:-3em (minus) und die andere margin-top:5em (plus). Daher empfehle ich Ihnen, die Konsistenz der Positionierung sorgfältig zu prüfen, wenn Sie ein solches Problem feststellen.

In Ihrem Fall, Michelle, habe ich mit einer längeren Verzögerung von 1s bis 3s getestet, was mir half zu verstehen, was die klarere Stufe ist, ein Blitz mit einer sehr kurzen Verzögerung. Ihr Farbverlauf beginnt eigentlich ohne Hintergrund und der Hintergrund der Seite wird angezeigt. Ich habe diese Informationen erhalten, indem ich den Hintergrund meiner Testseite von Elfenbein zu Schwarz geändert habe. 

Als ich Ihren Farbverlauf auf schwarzem Hintergrund ausprobierte, bekam ich eine schwarze Bühne/Blitzlicht (besser zu sehen bei 3s) .. Vielleicht sollte es klug sein, die Reihenfolge Ihrer Regeln zu testen und zu verstehen, warum der Farbverlauf beginnt der Hintergrund des Körpers oder des Elternteils und nicht von Ihrem Hintergrund.

Eine Problemumgehung könnte darin bestehen, die Schaltfläche in einem Div mit dem roten Hintergrund der Schaltfläche auf die exakte Größe und Form der Schaltfläche einzustellen.

0
Irene S.

Ich habe das Blinken so gelöst:

HTML wie folgt:

<div class="pswp__item" style="display: block; transform: translate3d(464px, 0px, 0px);"><div class="pswp__zoom-wrap" style="transform: translate3d(87px, 248px, 0px) scale(0.57971);"><img class="pswp__img" src="/platform/advice/feedback/downloads?attachmentIds=1304495004557536" style="opacity: 1; width: 414px; height: 414px;"></div></div>

css wie folgt:

.pswp__zoom-wrap{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.pswp__zoom-wrap *{
-webkit-backface-visibility: hidden!important;
backface-visibility: hidden!important;
}
.pswp__item{
transform: translate3D(0, 0, 0);
-webkit-transform: translate3D(0, 0, 0);
}
0
Youth overturn

Ich denke, das Problem ist, dass Sie für Google Chrome und Microsoft Edge-Webbrowser von einem linearen Farbverlauf zu einer einfarbigen Hintergrundfarbe wechseln. Um dieses Problem zu beheben, fügen Sie Ihren Pseudoklassen einen ähnlichen Hintergrund mit linearem Farbverlauf hinzu, in diesem Fall: hover und: active. Ich habe es selbst auf Ihrer jsfiddle ausprobiert und ich hatte kein Blinken im Rendering, während ich über den Button schwebte.

        background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: linear-gradient(top,  #ff3019 0%,#cf0404 100%);

Ich habe die obere Farbe des linearen Farbverlaufs geändert, um den Hover-Effekt spürbar zu ändern.

 button:hover {
background: -webkit-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: -o-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: -ms-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
   }

Es gibt keine Probleme mehr mit dem Blinken, wenn ich in Chrome oder Microsoft Edge über die Schaltfläche schwebe. Ich hoffe das hilft.

0
subutai5467