Glatte letter-spacing übergang auf andere Browser

Ich bin mit dem folgenden zu animieren, ein hover-transition:

a {
 letter-spacing: 1px;
 transition: all .5s ease-in;
}
a {
 letter-spacing: 2px;
}

Hier ist ein jsBin.

Anfangs wusste ich nicht, dass das schön sein, aber war angenehm überrascht, als ich sah, wie glatt es war, die animiert in Chrom. Auch wenn es nur änderungen von 1px in der Abstand, irgendwie Chrome gibt die illusion von einem reibungslosen übergang.

In Safari, obwohl es nur Sprünge von 1px auf 2px ohne dass schön glättend.

Gibt es eine Möglichkeit den gleichen Effekt zu erhalten in Safari?

(Alternativ gibt es eine CSS-only Weg, zu deaktivieren, diese in nicht-Chrome-Browser?)

  • Sieht gut aus in Firefox für mich... Safari ist nervös, obwohl
  • Mein bad, meine Augen gewesen sein muss, verraten mir, nur doppelt geprüft und das jsBin-Beispiel gepostet hat funktionieren auf Firefox. Kann bestätigen, es ist hässlich auf Safari wenn. Bearbeitete Frage.
InformationsquelleAutor Juicy | 2014-08-15
  1. 3

    Ich mis-Lesen Sie den Eintrag für letter-spacing im Liste der CSS-Eigenschaften Animiert. In der Tat, jede Art von Länge Einheit ist in der Lage, verwendet werden, mit der letter-spacing animation. Es scheint, dass Safari nicht reibungslos animieren, ein 1-pixel-Differenz - Fehler.

    Die Lösung für kleine letter-spacing Animationen, cross-browser ist die Verwendung von em Einheiten und auch eine kleinere Verzögerung von .1s um einen reibungslosen übergang. Safari hat nicht so eine glatte animation für kleine letter-spacing Animationen, aber es ist passabel.

    Aktualisiert jsBin-Beispiel mit einem em-Gerät (Getestet und funktioniert in Safari, Firefox, Chrome)

    CSS

    a {
 letter-spacing: 1px;
 transition: all .1s ease-in;
}
a:hover {
 letter-spacing: 0.2em;
}

    Verfügbare browser-Präfixe (falls erforderlich):

    -webkit-transition: all .1s ease-in;
-moz-transition: all .1s ease-in;
-ms-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
transition: all .1s ease-in;
    • Danke! Tolle Erklärung und funktioniert auf Safari, jetzt aber aus irgendeinem Grund auf Firefox 31 auf OS X meinen letter-spacing übergang einfach nicht funktionieren, selbst mit all den vendor-Präfixe und verwenden ems. Wenn es nicht zu viel verlangt und wenn Sie haben eine minute, könnte Sie sehen, wenn Sie Sie lokalisieren das Problem? rlcoaching.com/rl Funktioniert auf Safari und Chrome nun die Updates wenn.
    • Ich habe Angst, dass mit einem schnellen Blick, den ich nicht feststellen kann, das problem. Versuchen Sie, alle Ihre anderen übergänge und verwenden nur transition: all .5s ease-in; genau. Wenn das funktioniert, fügen Sie dann Ihre andere übergänge eins nach dem anderen und sehen, was bricht.
    • Danke für Eure Hilfe und geben es zu versuchen!
    • Keine Sorge, bitte Lesen Sie nochmals meine Antwort, dass ich einen Fehler gemacht 🙂
    InformationsquelleAutor misterManSam
  2. 1

    um es zu deaktivieren, verwenden Sie Ihren code wie folgt: 

    @media screen and (-webkit-min-device-pixel-ratio:0) {
a {
letter-spacing: 1px;
transition: all .5s ease-in;
}
a {
letter-spacing: 2px;
}
}

    dies wird deaktivieren Sie Ihren code in nicht-webkit-browser (also, funktioniert nur in Chrome und Safari). Andere als, dass der code funktioniert einwandfrei, Webkit hat nur bessere Glättung Motor, sonst nichts, aber Firefox und IE beherrscht es ohne Probleme, also weiß nicht wirklich, was sehen Sie in Bezug auf die Unterschiede

    InformationsquelleAutor Devin
Schreibe einen Kommentar