原因不明?! Mac + Safari でブラウザで表示の一部が消えてしまう?!

animate.css、wow.js、skroller.js の 3つを試用していたところ、Mac + Safari でブラウザで表示の一部が消えてしまう事象に遭遇しました。Compositing Border を表示すると構成要素そのものが消失していました。明確な原因は分からないのですが、対処法として、とりあえず、要素を小分けにして本来は不要であると考えられる属性 (ここでは、すなわちスタイル) を適用することで問題を回避できそうです。

animate.css、wow.js、skroller.js

animate.css、wow.js、skroller.js の 3つを使用することで
Webページに多様なアニメーション効果を付けることができます。
いずれも MIT license なので、そのまま使用や改造、商用利用や
有料販売も含めて誰でも自由に利用することができます。

animate.css
animate.css のデモページ
animate.css のダウンロードページ
animate.css は MIT license

wow.js
wow.js のデモページ
wow.js のダウンロードページ
wow.js は MIT license

skroller.js
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

show-compositing-borders

Debug → Drawing/Compositing Flags → Show Compositing Borders
とチェックを入れることで表示することができます。

Compositing Border を表示して眺めると
スクロールと共に一部を再レンダリングする際に、
構成要素自体が無くなってしまうようなのです。

このような部分的な非表示 (=構成要素の消失) が、
大きなブロック要素とスクロールと時間差で動く複数の要素間の組み合わせ、
あるいは CSSの記述順序によっては発生しました。

原因はレンダリングや GPUアクセラレーションのバグ
なのではないかとも思えるのですが、明確には分かりません。


CSSに関しては line-heigth の指定場所が
多少前後するだけで表示欠けに繋がることもありました。

対処法

対処法は以下の 2点です。

  1. Safari で確認する
  2. 小さなブロックに分ける

このような事象を確認できたのは Safari だけでした。
1点目として、とりあえずは Safari でのアニメーションと
表示確認を行うと良さそうです。

2点目は、あまり大きな表示面積を占めるブロックを
アニメーション対象にしないことです。
例えば、全体としては大きな要素であっても、
以下のような要素で子要素小分けにして囲むことで
部分的な消失を回避することができました。


<div class="wow fadeInUp" data-wow-delay="0s" data-wow-duration="0s">
...
</div>

なかなか遭遇しない事象だとは思うのですが、
HTML、CSS、Javascript のいずれにも問題がなさそうなのに
表示が崩れる (=消える) という場合には
もしかしたら何か参考になるかもしれません。

珍しい (?) 事象に遭遇したのでシェアしたいと思います。

お問い合わせについて

業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
ご契約前のコメントやメールでのやりとりは無料です。

お問い合わせフォーム

お急ぎの場合など、ただちに業務対応が必要な場合は、こちらのお問い合わせフォームをご利用ください。かきしちカンパニーお客様窓口が直ちに対応いたします。
※窓口へのお問い合わせ、お見積もりは無料です。


お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文 (必須)

Share

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*