Webサイトをデザインする時には、視覚的な演出としてちょっとした動きを付加することも同時に検討する。動きを与えることで見せたいものをより印象付けたり、UIの観点で使いやすくしたり、情報の内容をより分かりやすく伝えることが出来たりもするので、“動き” は手段として活用するとよい。ただし、あっちもこっちも無闇に動かしたり、フレームワークを使った制作環境で「簡単に動かせるから」という理由だけで意味のない動きを与えることは煩雑さを生んでコンテンツへの集中力の低下を招いたり、チープさなどのネガティブな印象を与えかねないので、やりすぎないように考えながら要所だけで使うのが好ましい。
私のJavascriptライブラリ《klib》にも簡単にアニメーション効果を与えることができる便利な関数がいくつか用意されているが、指定Nodeのbackground-imageにシャッターアニメーションを与えることができる新しい関数 $aniBgShutter() を追加した。
簡単に説明すれば、背景画像が設定されているNodeに色面によるシャッターアニメーションを加えて、閉じている間に背景画像を別のものに差し替えるというものだが、言葉で説明しても伝わらない気がするので下のサンプルを見てもらった方が早いだろう。
ちょっとした視覚的な演出として使用できるのは勿論だが、複数の画像を切り替えて見せるためのトランジション効果として捉えることもできるし、また、これは背景画像のアニメーションなので、この矩形内にコンテンツ(文字や画像やイラスト)を乗せることもできるので、発想次第では応用の幅が広がる仕様に仕上がっている点が気に入っている。
klibに新たな関数を追加する際には、主要ブラウザであるChrome、Edge、Safari、Firefoxで動作確認をしている。そのプログラミング中には、ブラウザによって動作が異なることもある。その原因追及や解決案を考えるという一連の作業もスキルアップに大いにつながってくる。
今回で云うなら、Firefoxだけで問題が発生した。
background-imageとして動かしているシャッター(色の面)は、linear-gradientで生成した特殊型のImage要素を、CSSのtransitionで動かしているのだが、対象Nodeのbackground-sizeにcoverが設定されていると、Firefoxの場合のみ何故かtransitionによるアニメーションが機能しないという不具合に気がついた。これがバグなのか仕様なのかは不明だが、いずれにせよ解決策を導き出さなければならない。
当初は原因が不明で、他のブラウザでは想定通りに動いているため「Firefoxでは、background-imageをtransitionできないのかぁ」と単純に考えたのだが、念の為、シンプルな構造のサンプルを作って試してみると‥‥普通に動く。おやっ？と思い、そこから探究が始まる。
background-imageが複数の場合は？ linear-gradientと画像を組み合わせた場合は？ などとサンプルを拡張しながら試していくうちに気がついたのが、background-sizeに「px値指定」ではなく「cover」を設定した場合にのみ不具合が生じるということ。動かす対象のlinear-gradientにではなく、その背後にある画像にcoverを設定している場合でも同様に不具合が生じるため、background-size全体を通してcoverを設定するのがダメなようだ。これを、「px値指定」に置き換えることで解決に至った。
想像するに、CSSのtransitionの性質上、“数値から数値へとなめらかに変化させる” ため、始まりの値や到達点の値が数値ではないものだと、Firefoxではエラーとなり処理できないのだと思われる。他のブラウザでは、coverやcontainのようにキーワードによる簡略指定であっても内部的にはpx値に変換した情報として持っているのだろう。どちらがCSSの技術仕様に沿った振る舞いなのかは分からないが、制作者としては当然後者であってほしいと思う。ちなみに「cover」と同じキーワード指定でも「auto」を利用している場合には、この不具合は発生しないことを確認している。
ブラウザ間でのCSS仕様の共通運用やエバーグリーンのブラウザが主流になった近年では、インターネット黎明期を知っている身としては想定外の動きをする頻度も1/10,000くらいになっていてとても開発がしやすいのだが、全くゼロになる訳ではないので、時々発生するこうしたブラウザ間での挙動の違いに直面すると、面倒だと思いながらもちょっとワクワクしながら原因究明をしてしまうのは開発者としての性だろうか。
