CSS-Subpixel bei Transformationen runden
Also, dieses Problem ist schon früher aufgetreten, wie hier: Translate + Canvas = Undeutlicher Text und hier: Ist es möglich, "snap to" pixel "nach einem CSS übersetzen?
Es scheint keine Schlussfolgerungen zu diesen Links zu geben - oder zu anderen Artikeln, die ich gelesen habe. Einige Responder fanden es nicht wichtig genug, um sich darum zu kümmern, deshalb hier ist, warum es in meiner Situation ist: 
Screenshot in Chrome 41.0.2272.104
Sehen Sie den Verlust im Detail in Safari? (Sehen Sie sich die Struktur im Space-Shuttle-Bild oder das Detail in den Felsen im 3. Bild an)
Das CSS für diese Leute ist
%Vor%In einigen dieser Situationen endet die Übersetzung also in einem halben Pixel. Das erste Bild auf der linken Seite endet mit einer Transformationsmatrix wie folgt:
%Vor%Zur Zeit sieht es so aus, als würde Chrome dies gut darstellen (ich habe gesehen, dass einige Leute sagen, dass verschiedene Browser das Problem in verschiedenen Versionen verursachen), aber Safari hat das Problem. Also, meine Annahme, dieses Problem zu beheben, besteht darin, sicherzustellen, dass es nur ganze Pixel gibt, was ich bereits getan habe, indem ich die Transformation in Javascript durchgeführt habe, aber das kostet mehr Leistungszeit, wenn es auf vielen Bildern läuft .
Ich habe ein paar CSS-only-Hacks ausprobiert, wie die Verwendung von scale3d ohne Erfolg. Wenn jemand JS-freie Lösungen hat, würde ich das geteilte Wissen sehr schätzen.
1 Antwort
In einigen Browsern können Sie Gleitkomma-Rundungsfehler von calc nutzen, um Ihre Zahl auf das nächste gewünschte Inkrement zu runden:
%Vor%sollte bewirken, dass 2.55px auf 3px aufgerundet werden. Dies funktioniert in einigen Browsern, wie Sie in der folgenden Tabelle sehen können:
Laut der obigen Grafik sind die unterstützenden Browser Chrome und Opera. Ich bin unsicher über Safari. Zum Glück, die nicht unterstützenden Browser, IE & amp; Firefox, ignorieren Sie einfach die Berechnung als einen ungültigen Eigenschaftswert. Um dies zu nutzen, verwenden Sie das folgende Beispiel, um CSS nach Ihren Bedürfnissen zu generieren. Ja, ich weiß, dass dieser Generator nicht immer gleiche Terme kombiniert, und ja, es gibt einen Grund: die Kombination solcher Terme würde eine Nummer erzeugen, die nicht gespeichert werden kann.
Bitte beachten Sie, dass Sie gemäß der lingualen Definition von reaktionsschnellem Echtzeitverhalten, ja, Ihre eigenen Werte in die obige Demo eingeben können, und ja, das entsprechende CSS wird in Echtzeit generiert.
Meine Testseite Ich habe Folgendes erstellt: Browser-Support-Test mit zweckdienlichem Rundungsfehler
Bitte beachten Sie, dass das oben abgebildete Diagramm zwar aktuell Browser unterstützt, sich jedoch sehr ändern kann, da die Verwendung von Rundungsfehlern nicht standardisiert ist: Die W3C-Spezifikation bezieht sie nur bei der Definition einer Gleitkommazahl mit ein stellen Sie niemals explizit fest, dass Browser Subnormale Fließkomma-Notation oder Rundungsfehler implementieren müssen.
Tags und Links rendering css3 transform css-transforms