※本記事は解決していない内容のメモです。
svgからBlobを生成すると、imgに直接画像を入れたりcssの画像URLとして取り扱ったりできる。その中でぼかし効果のあるフィルターを適用していたところ、Chromeでは適用されるのにFirefoxでは適用されなかった。「feGaussianBlur blob firefox」とかで検索しても関係しそうなWebページが見つからなかったので、メモを残す。
タグ: CSS3
CSS3 Animations を適用するとiOSでぼやける
enchant.jsでSpriteやLabelに対してjQueryを使ってエフェクトをかける方法についてはenchant.js + jQuery でエフェクトをつけるに書いた。使い慣れたjavascriptの機能を使ってエフェクトをかけられるのは魅力的だが、Spriteに対してCSS3の機能であるAnimationsを適用すると、iOS(iPhone,iPad等) の Mobile Safariで表示した際に、ピンボケというか過剰なアンチエイリアスというか、ぼやけた感じになってしまった。おかしいな、と思って実験したら、特定の条件下でAnimationsを適用した場合にぼやけてレンダリングされることが分かった。
特定の条件とは、
- div要素に対してCSSでbackground-imageを適用して画像を表示している(enchant.jsのEntity)
- 複数の画像にCSS3 Animationsを適用している
- どれかの要素でCSS3のアニメーションが継続中
といった場合だ。そこで、実験をしてみた。
※結論だけ知りたい人はこちらをクリック