animate.css、wow.js、skroller.js
animate.css、wow.js、skroller.js の 3つを使用することで
Webページに多様なアニメーション効果を付けることができます。
いずれも MIT license なので、そのまま使用や改造、商用利用や
有料販売も含めて誰でも自由に利用することができます。
animate.css のデモページ
animate.css のダウンロードページ
animate.css は MIT license
wow.js のデモページ
wow.js のダウンロードページ
wow.js は MIT license
skroller.js のデモページ
skroller.js のダウンロードページ
skroller.js は MIT license
大きなブロック要素やCSSの記述順序によっては表示の一部が消える
animate.css、wow.js、skroller.js の
3つを併用しながらその動作を眺めていたら
不思議な事象に遭遇しました。
ほとんどの場合では何の問題も起きないのですが、
Mac (確認例: OS X 10.9.5) + Safari (確認例: 7.1.6)
で動作の特徴を観察していた時のことです。
上記の動画のように表示内容が途中で切れたり、
スクロールと共に途中で部分的に消えたりするのです。
※
動画では最初からコンテンツの下半分が表示されず、
動画の11秒あたりの下端から上端へとスクロールする途中で
さらに部分的に表示が消えます。
wow.js でスクロールと連動して動かす部分で
このような事象があらわれました。
Webページに描画されている数字と枠線は
Compositing Border です。
Compositing Border はブラウザでの表示や
GPU アクセラレーションでの構成単位の
境界線のようなものです。
ターミナルで以下のようなコマンドを実行し
defaults write com.apple.Safari IncludeInternalDebugMenu 1
Debug → Drawing/Compositing Flags → Show Compositing Borders
とチェックを入れることで表示することができます。
Compositing Border を表示して眺めると
スクロールと共に一部を再レンダリングする際に、
構成要素自体が無くなってしまうようなのです。
このような部分的な非表示 (=構成要素の消失) が、
大きなブロック要素とスクロールと時間差で動く複数の要素間の組み合わせ、
あるいは CSSの記述順序によっては発生しました。
原因はレンダリングや GPUアクセラレーションのバグ
なのではないかとも思えるのですが、明確には分かりません。
※
CSSに関しては line-heigth の指定場所が
多少前後するだけで表示欠けに繋がることもありました。
対処法
対処法は以下の 2点です。
- Safari で確認する
- 小さなブロックに分ける
このような事象を確認できたのは Safari だけでした。
1点目として、とりあえずは Safari でのアニメーションと
表示確認を行うと良さそうです。
2点目は、あまり大きな表示面積を占めるブロックを
アニメーション対象にしないことです。
例えば、全体としては大きな要素であっても、
以下のような要素で子要素小分けにして囲むことで
部分的な消失を回避することができました。
<div class="wow fadeInUp" data-wow-delay="0s" data-wow-duration="0s">
...
</div>
なかなか遭遇しない事象だとは思うのですが、
HTML、CSS、Javascript のいずれにも問題がなさそうなのに
表示が崩れる (=消える) という場合には
もしかしたら何か参考になるかもしれません。
珍しい (?) 事象に遭遇したのでシェアしたいと思います。
お問い合わせについて
業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
※ご契約前のコメントやメールでのやりとりは無料です。
