Wenn Sie auf die Eingabe klicken und dann auf Unschärfe gehen, bleiben Artefakte auf dem Bildschirm in Chrome 15. Ich habe dieses Problem zuerst auf einer Website bemerkt, die ich entwickelt habe, also eliminierte ich alles außer dem Eingabefeld und einer Schaltfläche. Wenn ich den Knopf entferne, passiert der Übergang gut. Irgendwelche Ideen?
Fügen Sie dieses CSS Ihrem Eingabefeld hinzu:
%Vor%Dadurch wird Chrome gezwungen, Ihre GPU für das Rendering zu verwenden, wodurch das Artefaktproblem gelöst und Ihre Animationen erstickt werden.
Dies ist ein Fehler beim Rendern von CSS-Übergängen in Chrome. Aber Sie können es umgehen, indem Sie den "Refresh" -Element-Vorgang erzwingen. Bitte beachten Sie, dass Sie nicht das input -Element aktualisieren müssen, aber es ist übergeordnet, daher wird Ihnen der folgende Code helfen:
Und repaint class sollte etwas haben, das sich auf die Sicht des Elternteils bezieht, zum Beispiel eine andere Farbe:
Sie können jedoch color durch visibility oder ein anderes für die Ansicht relevantes (aber nicht wichtig / sichtbar für das übergeordnete) Attribut ersetzen.
Hier ist jsfiddle , um die Problemumgehung zu demonstrieren
Ich hatte ein ähnliches Problem mit Boxschattenartefakten in Safari und fand das Hinzufügen von -webkit-transform:scale(1); zur Fokusregel, um das Problem zu beheben.
Siehe Ссылка - es sollte jetzt gut funktionieren.
Wie Cesar sagte, wird -webkit-transform: translate3d(0,0,0); das Problem beheben, aber es kann sich auch auf das Rendern von Text auswirken.
Tags und Links css google-chrome css3 css-transitions