crisp-edgesのサポート
tsugehara tsugehara 調査した。環境は諸事情でMac 10.6のみ。
version 24時点ではこのCSSは意味が無い。
image-rendering:-webkit-optimize-contrast;
代わりに、contextに対するwebkitImageSmoothingEnabledが使える。
context.webkitImageSmoothingEnabled = false;
描画結果は正しいが、意外な事に逆に遅い。おそらくスムーズ描画の際はGPUアクセラレーションがきいており、これを切ることでCPU処理になっているのではないかと。
高速化としては、むしろ使わない方がいいという結果。
今回の調査で唯一高速化した。さすが本家本元。
CSSも効果はあるが、contextでやった方が楽なのでこちらで検証。
context.mozImageSmoothingEnabled = false;
trueだと60fpsぎりぎりのものが、falseにすると80くらい出ており結構違う。
不明
指定方法無し。
おそらくChromeと同じwebkit由来の理由でimage-renderingがきかず、Chromium系で実装されたwebkitImageSmoothingの実装が間に合ってない or 実装されてない。
指定出来てるような出来てないような。
contextには指定方法おそらく無し。
一応これが使えると書いてあるが、テストプログラムではChromeやFireFoxのようなわかりやすい結果にならず。
image-rendering: -o-crisp-edges;
一応やってみたところ、あまり差異が見受けられず。ちょっと遅いようにも見えたが誤差の範囲。
tsugehara r24 でサポートしておいた。
速度向上にはFireFox以外に効果がないため、あまりにもマニアックなオプションになってしまったがindex.htmlからリンクは貼らないが、検証用にcrisp-edges.htmlも作ってある。
なお唯一不明だったOperaだが、テストプログラム上で見る限りやはりサポートしてないと思われる。
image-rendering:crisp-edges;は、速度向上に効果がありそうなので、サポートしておきたい。 http://stackoverflow.com/questions/3900436/image-scaling-by-css-is-there-a-webkit-alternative-for-moz-crisp-edges