Ich habe die CSS3-Transformation verwendet, um Bilder und Textfelder mit Rahmen auf meiner Website zu drehen.
Das Problem ist, dass der Rand in Chrome gezackt aussieht, wie bei einem Spiel (mit niedriger Auflösung) ohne Anti-Aliasing. In IE, Opera und FF sieht es viel besser aus, weil AA verwendet wird (was immer noch deutlich sichtbar ist, aber nicht so schlecht). Ich kann Safari nicht testen, da ich keinen Mac besitze.
Das gedrehte Foto und der Text selbst sehen gut aus, nur der Rand sieht gezackt aus.
Das CSS, das ich benutze, ist folgendes:
.rotate2deg {
transform: rotate(2deg);
-ms-transform: rotate(2deg); /* IE 9 */
-webkit-transform: rotate(2deg); /* Safari and Chrome */
-o-transform: rotate(2deg); /* Opera */
-moz-transform: rotate(2deg); /* Firefox */
}
Gibt es eine Möglichkeit, dies zu beheben, z. B. indem ich Chrome zur Verwendung von AA zwinge?
Beispiel unten:
Antworten:
Falls jemand später danach sucht, besteht ein guter Trick, um diese gezackten Kanten bei CSS-Transformationen in Chrome zu beseitigen, darin, die CSS-Eigenschaft
-webkit-backface-visibility
mit dem Wert von hinzuzufügenhidden
. In meinen eigenen Tests hat dies sie vollständig geglättet. Hoffentlich hilft das.quelle
padding: 1px; -webkit-background-clip: content-box;
padding: 1px;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-background-clip:content-box;background-clip:content-box;
Wenn Sie
transition
anstelle von verwendentransform
,-webkit-backface-visibility: hidden;
funktioniert nicht. Während der Animation wird eine gezackte Kante für eine transparente PNG-Datei angezeigt.Um es zu lösen, benutzte ich:
outline: 1px solid transparent;
quelle
Das Hinzufügen eines transparenten 1px-Rahmens löst ein Anti-Aliasing aus
Alternativ können Sie einen 1px transparenten Kastenschatten hinzufügen.
quelle
outline: 1px solid transparent;
hat für mich gut funktioniert. Die anderen oben genannten Lösungen funktionierten nicht gut genug.outline: 1px solid transparent;
Anti-Aliasing auch in Firefox 52 auslösen (das hat die gleichen Probleme wie Chrome)Versuchen Sie 3D-Transformation. Das funktioniert wie ein Zauber!
quelle
preserve-3d
;rotate
kann immer noch verwendet werden, ohne zu wechselnrotateZ
).Die gewählte Antwort (noch eine der anderen Antworten) hat bei mir nicht funktioniert, aber das hat funktioniert:
img {outline:1px solid transparent;}
quelle
Ich habe ein Problem mit einem CSS3-Gradienten mit -45 Grad. Der
background
schräge, war stark gezackt ähnlich, aber schlimmer als der ursprüngliche Pfosten. Also fing ich an mit beiden zu spielenbackground-size
. Dies würde die Zackigkeit ausdehnen, aber es war immer noch da. Dann habe ich zusätzlich gelesen, dass andere Leute ebenfalls Probleme in Schritten von 45 Grad haben, also habe ich mich von angepasst-45deg
auf-45.0001deg
und mein Problem wurde gelöst.In meinem CSS unten
background-size
war anfangs30px
und derdeg
für den Hintergrund Gradient war genau-45deg
und alle Keyframes waren30px 0
.quelle
Möglicherweise können Sie das Zacken mit unscharfen Kastenschatten maskieren . Durch die Verwendung von -webkit-box-shadow anstelle von box-shadow wird sichergestellt, dass keine Nicht-Webkit-Browser betroffen sind. Möglicherweise möchten Sie jedoch Safari und die Browser des mobilen Webkits überprüfen.
Das Ergebnis ist etwas besser, aber immer noch viel weniger gut als bei den anderen Browsern:
quelle
Ich dachte nur, wir würden auch unsere Lösung einwerfen, da wir unter Chrome / Windows genau das gleiche Problem hatten.
Wir haben die Lösung von @stevenWatkins oben ausprobiert, hatten aber immer noch das "Stepping".
Anstatt
Wir verwendeten:
Für uns hat das den Trick gemacht 🎉
quelle
Das Hinzufügen des Folgenden zu dem Div, das das betreffende Element umgibt, hat dies für mich behoben.
In meinem Fall erschienen die gezackten Kanten um das Videofenster.
quelle
Für mich war es die perspektivische CSS-Eigenschaft, die den Trick machte:
In meinem Fall völlig unlogisch, da ich keine 3D-Übergänge verwende, aber trotzdem funktioniert.
quelle
Für Leinwand in Chrome (Version 52)
Alle aufgelisteten Antworten beziehen sich auf Bilder. Aber mein Problem ist über Leinwand in Chrom (v.52) mit Transformation drehen. Sie wurden gezackt und all diese Methoden können nicht helfen.
Lösung, die für mich funktioniert:
So wichtige Codeblöcke:
Stichprobe: https://jsfiddle.net/tLbxgusx/1/
Hinweis: Es gibt viele verschachtelte Divs, da es sich um eine vereinfachte Version aus meinem Projekt handelt.
Dieses Problem wird reproduziert auch für Firefox für mich . Bei Safari und FF mit Netzhaut gibt es kein solches Problem.
Eine andere fundierte Lösung besteht darin, Canvas in Div gleicher Größe zu platzieren und folgendes CSS auf dieses Div anzuwenden:
Und Rotation sollte auf dieses Wickel-Div angewendet werden. So gelistete Lösung funktioniert aber mit kleinen Modifikationen.
Ein modifiziertes Beispiel für eine solche Lösung lautet: https://jsfiddle.net/tLbxgusx/2/
Hinweis: Siehe Stil von div mit Klasse 'dritter'.
quelle