web-dev-qa-db-ja.com

-webkit-transform rotate-Chromeのピクセル化された画像

コンテナdivで-webkit-transform: rotate(-5deg);を使用すると、Chromeはエッジがぎざぎざになった画像のグリッドをレンダリングします。一方、FF（-moz-transform:）およびIE（-ms-filter:）すべてが正常に見える-以下の違いを参照してください。

これについて私にできることはありますか？

chromeff

htmlcssgoogle-chrometransform
33
davivid

あなたは質問への答えをチェックアウトすることができます css変換、クロムのギザギザのエッジ

手伝ってくれた

受け入れられた答えから：

後でこれを探している人がいる場合、ChromeのCSS変換でギザギザのエッジを取り除く素敵なトリックは、hiddenの値を持つCSSプロパティ-webkit-backface-visibilityを追加することです。私自身のテストでは、これで完全にスムーズになりました。お役に立てば幸いです。

68
Christian Westman

これは、Webkitエンジンの Antialiasing バグのようです。 レポートが提出されましたが、まだ解決されていません 。

背景と同じ色の境界線を追加して、効果を最小限に抑えることができます。

14
Kyle
-webkit-transform: rotate(-5deg) translate3d( 0, 0, 0);

クロムのトリックを行います。

6
Guido Gallenkamp

CSSルール_-webkit-transform-style: preserve-3d;_を試しましたか？

-webkit-transform: rotateZ(-5deg);を使用して特定の軸を回転させることもできます。

4
Luke Dennis

Chrome 33（Windows 7）でこの問題に遭遇しました。このページで提案された修正をすべて試しました。不幸が続きました。

transform: rotate(40deg);
-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);

this answerを見つけました。いくつかの簡単な実験の後、次の組み合わせがChromeで完全に機能することがわかりました。

-webkit-backface-visibility: hidden;
outline: 1px solid transparent;

クロスブラウザはまだテストしていません。これがどのバグをさらに引き起こすかはわかりません。警告されました。これが誰かを正しい方向に向けることを願っています。

サイドノート：実験中に、-webkit-backface-visibility: hidden;（単独で）削除された変換されていない画像からのアンチエイリアス。

3
Just Plain High

これは WebKitのバグ で、すでに修正されています 修正はChrome 15 に表示されます。

全員が15+に更新されるまでの回避策は、-webkit-backface-visibility: hidden;回転する要素に。私のために働いた。これにより、要素のアンチエイリアスがトリガーされます。

2
Dmitry Leskov

背景と同じ色のボックスシャドウを画像に追加して、効果を減らすことができます。

例： http://antialiasing-webkit.qip.li/edit/

1
soufell

これはすべての用途に適しているわけではありませんが、マークアップを制御して余分な<div>を追加することを気にしない場合は、生成されたコンテンツを使用して、Chromeで回転した画像の端を劇的にクリーンアップできます。これは、Chromewillが画像上に配置された生成されたコンテンツにアンチエイリアスを適用するためです。

ここに例を見ることができます： http://jsfiddle.net/cherryflavourpez/2SKQW/2/

最初の画像には何も行われず、2番目の画像には背景色と一致するように境界線が適用されます。私が見ることのできる違いはありません。

3番目の画像divには、境界線がEdgeの周りに配置された、生成されたコンテンツが含まれています。 Edgeの周囲のピクセルが失われますが、より良く見えます。 CSSは一目瞭然です。これには、画像に境界線を作成する必要がないという利点があります。これは、私にとっては高すぎるように思えます。

0
CherryFlavourPez

私にとって、トリックを行ったのはパースCSSプロパティでした。

-webkit-perspective: 1000;

私の場合、3Dトランジションを使用しないので完全に非論理的ですが、それでも動作します。

0
Aron