FirefoxでSVGからBlobを生成するとfilterが適用されない

※本記事は解決していない内容のメモです。

svgからBlobを生成すると、imgに直接画像を入れたりcssの画像URLとして取り扱ったりできる。その中でぼかし効果のあるフィルターを適用していたところ、Chromeでは適用されるのにFirefoxでは適用されなかった。「feGaussianBlur blob firefox」とかで検索しても関係しそうなWebページが見つからなかったので、メモを残す。

続きを読む FirefoxでSVGからBlobを生成するとfilterが適用されない

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のアニメーションが継続中

といった場合だ。そこで、実験をしてみた。
※結論だけ知りたい人はこちらをクリック

続きを読む CSS3 Animations を適用するとiOSでぼやける