Beim Schweben über den CSS-Übergang in Safari werden bestimmte Schriftfarben aufgehellt

Kann ich Euch nicht sagen, warum es dies zu tun, aber Safari ist nicht ändern Sie Ihre text-Farbe, es ist anti-aliasing der text anders, während der übergang ist in Bewegung. Die text-Ränder sind glatter, und der text selbst wird dünner. Dieses extra ist offensichtlich, wenn Sie zoom in auf der Geige mit Barrierefreiheit-tools. Bei einigen kleineren Größen, die Schattierung um die Taste neben dem text verschiebt sich auch. (Ist es möglich, dass Safari ist Neuzeichnen einige Dinge, oder die Umorientierung auf eine sub-pixel-Ebene, während die übergänge ? Jemand erklären Sie bitte, es treibt mich in den Wahnsinn jetzt!)

Weil ich habe keine wirkliche Ahnung, warum es tut dies entweder, könnten diese nicht die besten Lösungen:

Je nachdem, was Sie sind, verändern, austauschen der css transform-mit einer javascript-animation wird wahrscheinlich beheben.

Zum Beispiel in Ihrer fiddle das problem auch aufgetreten mit einer Skala transformation, aber nicht mit einer ähnlichen die jQuery animate Funktion.

Scheint es einige Schattierungen und Stilen, wo das anti-aliasing ändern, ist weniger offensichtlich (zumindest im fiddle), so könnte man auch versuchen, das styling der Platzhalter und anderen erfolgt text unterschiedlich.

(Dieser thread kann helfen, mit styling die Platzhalter, wenn Sie diesen Weg gehen: Ändern Sie eine HTML5-input - placeholder color mit CSS )

InformationsquelleAutor der Antwort Brid

Es ist nicht mehr relevanten Thema habe ich gefunden für ein problem, das ich hatte, aber, dass der in Zusammenhang mit oben genannten Problem. So, könnte hilfreich sein für manche.

In zwei Worten: ich habe einige container (popup), einige element im inneren.
Erscheinen geht den folgenden Weg: container-hintergrund verblassen bis zu dunklen über die Deckkraft und das element im inneren ist das scaling-up (wie kommen uns näher von hinten). Alles Super funktioniert überall, aber nicht in Safari (Mac/Win/iPhone). Safari "zunächst" zeigt meine container, aber es blinkt seltsame Weise (winzig kurzes blinken angezeigt).

Nur durch das hinzufügen von-webkit-transform: translateZ(0); (container!!!) Tat helfen.

.container {
    -webkit-transform: translateZ(0); /* <-- this */
}

.container section {
    -webkit-transform: translateZ(0) scale(.92); /* <-- and I added translate here as well */
    -webkit-transition: -webkit-transform .4s, opacity .3s;
    opacity:0;
}

.container.active section {
    -webkit-transform:translateZ(0) scale(1);
    -webkit-transition: -webkit-transform .3s, opacity .3s;
    opacity:1;
}

Aber sprechen die übergänge, gab es auch den folgenden Teil des Codes:

.container {
    ...
    top:-5000px;
    left:-5000px;
    -webkit-transition: opacity .5s, top 0s .5s, left 0s 5s, width 0s 5s, height 0s 5s;
}
.container.active {
    -webkit-transition: opacity .5s;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

wenn man bedenkt, dass ich möchte, um zu zeigen/verbergen der popup mit nur css Umschalten (und auch, um Sie verschwinden schön statt einfach nur "display:none").

also irgendwie nach erscheinen von Safari (offensichtlich) war Erben übergang Eigenschaften neben "Deckkraft" ja, wie ich es habe überladen Sie nur mit -webkit-transition: opacity .5s;

so, Sie die folgenden das problem gelöst:

.container {
    ...
    -webkit-transition: opacity .5s, top 0s 0s, left 0s 0s, width 0s 0s, height 0s 0s;
}

InformationsquelleAutor der Antwort Agat

Gibt es ein ähnliches problem mit transition und translate3d. Manchmal jedes element auf der Seite mit :hover styles zeigt seine hover-Verhalten. Ich habe dieses problem mit einem slider. Setzen Sie die -webkit-transform: translateZ(0); zu den :hover element, und sein Verhalten ist normal.

InformationsquelleAutor der Antwort Johann Heyne