Seltsamer CSS3-Übergang (Flackern)

Wenn ich mit der Maus über meine Schaltfläche fahre, blitzt es zuerst weiß auf, wenn der Übergang gestartet wird. Warum flackert es, 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 Flackern habe ich wegbekommen. Hinzufügen “-webkit-backface-visibility: hidden;» zu den Elementen, die Sie überführen. Voilà!

Miguel hat Recht, was die Rückseitensichtbarkeit betrifft, die den störenden Blitz behebt. Ich verwende jedoch die Transformationsskalierung und die SVG-Animation wird nach der Skalierung nicht scharf sein. Es ist scharf, wenn Sie die Eigenschaft backface-visiblity nicht verwenden.

Sie haben also entweder eine nette Animation mit einer verschwommenen Grafik oder eine gut aussehende Grafik mit Bildschirmblitzen.

Sie können jedoch die folgende Zeile zum übergeordneten Objekt des zu überführenden Objekts hinzufügen, wodurch das Blinken des Bildschirms behoben wird und Ihre Grafik nach dem Skalieren immer noch scharf wiedergegeben wird.

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

Ich glaube, es ist derzeit ein Problem ohne Lösung. Auch ich bin darauf gestoßen, bevor ich herumgespielt habe, und konnte es nicht zum Laufen bringen. Die Verwendung einer Volltonfarbe scheint in Ordnung zu sein oder sie mit einem Hintergrundbild vorzutäuschen.

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

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

Das Flackern, das Sie bemerken, ist eigentlich die Hintergrundfarbe der Schaltfläche, die in transparent geändert wird (also “blinkt” die Schaltfläche oder wird in Ihrer Fiddle weiß, weil die Hintergrundfarbe des Körpers weiß ist).

Wenn Sie Ihre Schaltfläche über ein anderes Element mit genau derselben Größe/Höhe/Hintergrundfarbe (einschließlich Farbverläufen) legen, ist das “Flimmern” nicht wahrnehmbar.

Sehen Sie sich hier ein Beispiel mit Ihrer Geige an: http://jsfiddle.net/hrDff/12/

Trotzdem definitiv ein Bug…

Ich denke, das Problem ist, dass Sie für Google Chrome- und Microsoft Edge-Webbrowser von einem Hintergrund mit linearem Farbverlauf zu einer durchgehenden Hintergrundfarbe wechseln. Um dieses Problem zu beheben, würden Sie Ihren Pseudoklassen einen ähnlichen Hintergrund mit linearem Farbverlauf hinzufügen, in diesem Fall :hover und :active. Ich habe es selbst auf Ihrem jsfiddle ausprobiert und ich hatte kein Blinken im Rendering, während ich mit der Maus über die Schaltfläche 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 Schwebeeffekt deutlich zu verä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 fahre. Ich hoffe das hilft.

Bei einem ähnlichen Problem halfen die Vorschläge von Jan, alle Hintergrundbilder außer einem zu verbessern. Das Flackern des letzten habe ich beseitigt, indem ich zwei widersprüchliche Positionierungsregeln bemerkte. Ich hatte für ein position:static eine Regel margin-top:-3em (minus) und das andere margin-top:5em (Plus). Daher schlage ich vor, dass Sie die Konsistenz der Positionierung sorgfältig überprüfen, wenn Sie auf ein solches Problem stoßen.

In Ihrem Fall, Michelle, habe ich mit einer längeren Verzögerung von 1 s bis 3 s getestet, was mir geholfen hat zu verstehen, was diese klarere Phase ist, ein Blitz mit einer sehr kurzen Verzögerung. Ihr Farbverlauf beginnt tatsächlich ohne Hintergrund und was Sie sehen, ist der Hintergrund der Seite. Ich habe diese Informationen erhalten, indem ich den Hintergrund des Hauptteils meiner Testseite von Elfenbein auf Schwarz geändert habe.

Als ich Ihren Farbverlauf auf einem schwarzen Hintergrund ausprobierte, bekam ich eine schwarze Bühne / einen schwarzen Blitz (bei 3 Sekunden leichter zu sehen). Vielleicht sollte es ratsam sein, die Reihenfolge Ihrer Regeln zu testen und auch zu verstehen, warum der Verlauf vom Hintergrund des Körpers oder der Eltern ausgeht und nicht von Ihrem Hintergrund.

Eine Problemumgehung könnte darin bestehen, Ihre Schaltfläche in einem Div mit rotem Hintergrund Ihrer Schaltfläche auf die genaue Größe und Form Ihrer Schaltfläche festzulegen.

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="https://stackoverflow.com/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);
}