WebKit: Verschwommen text mit css skalieren + translate3d

Ich sehe ein Problem, wo Chrome und anderen WebKit-Browsern Massiv verschleiern css-skalierten Inhalts, der hat auch translate3d angewendet.

Hier ist ein JS-Fiddle: http://jsfiddle.net/5f6Wg/. (Ansicht in Chrome.)

CSS:

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
}

.testInner
{
  /*-webkit-transform: scale(1.2);*/
  -webkit-transform: scale3d(1.2, 1.2, 1);
  text-align: center;
}

HTML:

<div class="test">
  <div class="testInner">
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
  </div>
</div>

Gibt es bekannte workarounds für dieses? Ich verstehe, dass in dem einfachen Beispiel oben, konnte ich einfach verwenden, übersetzen, anstatt translate3d - der Punkt hier ist, Streifen Sie den code auf das wesentliche.

  • Gleich auf firefox
  • ich denke, dass dieses Problem behoben ist, nicht verschwommen zu mir
  • Ein kleines Plus: in der letzten Chrome-ich stucked mit dem problem, wie bei der Verwendung von nicht gerundeten Werte für translate3d. Rundung Sie Feste aller Unschärfe für mich.
InformationsquelleAutor phil | 2011-11-05
  1. 33

    Webkit-leckereien 3d umgewandelt Elemente wie Texturen, statt Vektoren, um 3d-hardware-Beschleunigung. Die einzige Lösung wäre, zu erhöhen die Größe der Schrift und die Drosselung der element, die im wesentlichen die Schaffung einer höheren res-textur.

    Finden Sie hier:
    http://jsfiddle.net/SfKKv/

    Beachten Sie, dass Anti-Aliasing ist noch underpar (Stängel sind verloren) also ich bin beefing den text mit ein wenig text-shadow.

    • Super hilfreich, danke dafür!
    • wird es viel langsamer auf mobilen webkits dann?
    • Tolle Lösung, sieht ein bisschen aus wie ein retina-Lösung, dann aber für desktops. Liebe die Idee, die Umsetzung ist es jetzt, super-Requisiten.
    • Sieht ziemlich schrecklich zu mir in Chrome Version 54.0.2840.71 m (64-bit)
    InformationsquelleAutor methodofaction
  2. 33

    Fand ich, dass die Verwendung von: 

    -webkit-perspective: 1000;

    auf dem Behälter Ihrer schriftart oder Symbol legen Sie hielten es frisch für mich nach dem experiment mit dem Thema auf Android 4.2 für nexus irgendwann.

    • Dang, das war es! Zusammen mit -webkit-transform: translate3d(0,0,0). Die Buchstaben wurden Formulare knallen, in eine seltsame Art und Weise am Ende der Skala, und das es behoben. Alles versucht unter der Sonne.
    • Dies anzunehmen ist, weil die Eigenschaften, die trigger GPU-Beschleunigung, steigt auch die Leistung der übergänge auf die Elemente! 🙂
    • Diese Lösung sollte sein gekennzeichnet als eine richtige Antwort.
    • Hat es für mich!!
    • ich glaube nicht, dass der OP wollte eine mobile Lösung. Und auf dem desktop es nicht tun. Ich von Ihnen positiv bewertet werden, diese Antwort, aber das ist alles.
    • Vereinbart mit @Mtz, nicht am desktop (Chrome).
    • Ich musste auch -webkit-transform: translate3d(0,0,0)

    InformationsquelleAutor hallodom
  3. 29

    Css-filter-Effekt ist eine grafische Bedienung, die es erlaubt, zu manipulieren, die das Aussehen von HTML-element. Da Chrom 19 diese Filter sind GPU-beschleunigt, um Sie super schnell.

    CSS3 bringt eine Reihe von standard-filter-Effekte-einer von Ihnen ist der blur-fitler:

    -webkit-filter: blur(radius);

    'Radius' - parameter bestimmt, wie viele Pixel auf dem Bildschirm, die sich harmonisch in einander, so dass die einen größeren Wert schaffen mehr verwischen. Null natürlich lässt das Bild unverändert.

    Stellen Sie den radius auf 0 gesetzt wird, Kraft-browser zu verwenden GPU-Berechnung und die Kraft es zu behalten, das html-element unverändert. Es ist wie die Anwendung eines "harten Kanten" - Effekte.

    Also für mich die beste Lösung um dieses Problem zu beheben verschwommen Effekt war, fügen Sie diese einfachen code-Zeile:

    -webkit-filter: blur(0);

    Dort ist auch ein bekannter bug, der betrifft nur die retina-Bildschirme. (Siehe hier: Warum nicht verwischen(0) entfernen Sie alle text-blur in Webkit/Chrome auf retina-Bildschirmen?). So, damit funktioniert es auch für retina, ich empfehle das hinzufügen dieses zweiten Zeile:

    -webkit-transform: translateZ(0);
    • geben Sie bitte eine Erklärung auf deine Antwort
    • Als Hinweis: das anwenden von Bewegungsunschärfe auf das Fliegen in den dev-tools scheint nicht die gleiche Wirkung haben, wie es dort auf der Seite zu laden. Nicht sicher, ob es nur mir, aber dies kann die Antwort, die du suchst, einfach die Seite neu laden.
    • Nach dem Versuch ALLES auf eine google-Suche dies war der fix. Danke!!!
    • Du bist willkommen 😉
    • dieser arbeitete für mich! .modal { max-width: calc(100% - 50px); max-height: calc(100% - 50px); position: fixed; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-filter: blur(0); overflow: hidden; }
    • Genial, vielen Dank!
    • maoosi Antwort für mich gearbeitet hat, aber etwas scheint sich verändert zu haben, da es nicht mehr funktioniert in der neuesten Chrome?

    InformationsquelleAutor maoosi
  4. 5

    Versuchen, diese

     ...{
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}

    Oder für eine genauere Vorgehensweise können Sie rufen eine javascript-Funktion zum neu berechnen der Transformationsmatrix durch entfernen der dezimalen Werte der matrix. siehe: https://stackoverflow.com/a/42256897/1834212

    • für mich nur zoom: 1.005; gut funktioniert. keine Notwendigkeit zu verwenden scale
    InformationsquelleAutor Miguel
  5. 2

    Stieß ich auf dieses Problem bei der Verwendung des Isotop-plugin (http://isotope.metafizzy.co/index.html) in Kombination mit dem zoom-plugin (http://janne.aukia.com/zoomooz/). Ich baute ein jquery-plugin, zur Bearbeitung meines Falles. Ich warf ihn in ein github-repo, falls jemand davon profitieren könnten. - https://github.com/charleshimmer/jquery-hirestext.

    InformationsquelleAutor chuckles
  6. 0

    Ich javascript ein, um den text zu bewegen 1px oben und dann mit 100ms nach -, zurück-1px nach unten. Es ist fast unperceptive und löste das problem vollständig cross-browser -.

    InformationsquelleAutor Mixtelf
  7. -1
    body {
-webkit-font-smoothing: subpixel-antialiased;
}

    oder ich denke, Sie könnten, dass auf ein bestimmtes element, aber ich hatte Probleme mit einem element betreffen die gesamte Website.

    Ich denke, es ist ein problem mit custom font-face-Schriftarten.

    • Schätze, dass Sie versuchen, hinzufügen von Wert hier, aber die JS-Fiddle sofern ich nicht verwenden Sie eine benutzerdefinierte schriftart und -webkit-font-smoothing scheint nicht zu keinen Unterschied machen. Funktioniert es bei dir in die Geige oben?
    • subpixel-Antialiasing schriftart-Glättung ist jetzt Standard in Chrom.
    InformationsquelleAutor placeboaddict
  8. -2

    Webkit-leckereien 3d umgewandelt Elemente wie Texturen, statt Vektoren
    um 3d-hardware-Beschleunigung.

    Das hat nichts damit zu tun. Sie werden bemerken, dass Ihre aliasing-problem kann behoben werden, mit der neben der Dauer und Richtung der information (z.B. 0.3 linear). Ihrer eine stute Rendern alles, was zur Laufzeit:

    Gleiche für die oben ^

    • Sorry Tom, aber ich habe keine Ahnung, was Sie sich beziehen. Sprechen Sie über das hinzufügen einer animation? (Die Absicht war nur, zu skalieren, nicht animiert, nichts.) Wenn Sie ändern Sie die original-JS-Fiddle, vielleicht würde helfen.
    • Da ich einen übergang habe ich Hinzugefügt, Dauer und Richtung. Die Unschärfe weiterhin besteht.
    InformationsquelleAutor Tom
Schreibe einen Kommentar