以前に投稿した記事で、コーチマークチュートリアルを簡単に実装できるライブラリ「driver.js」を紹介したと思いますが、今回はこちらを使用していた時に遭遇した不具合の対処法についてです。
以前に実装した時は全く問題なく動作していたのですが、それから CSS や画面表示で使用するライブラリを変更したため、念のため動作確認をしたところ、とある要素をハイライトした時に下の写真のような見た目になってしまいました…。
ちょっと分かりずらいですが、フッターに配置した 5個のタブの内、左端の要素をハイライトしようとしています。
ですが、その時に要素が真っ白になってしまいました…！
ちなみに、5つのどれをハイライトしても全部が同じ状態になります。
これでは何の要素を強調しているのかわからない！
で、こちらをライブラリの GitHub の issues で調べたところ、下記の投稿がヒットしました。
Bug(Ionic) Driver highlighted element · Issue #158 · kamranahmedse/driver.js · GitHub
https://github.com/kamranahmedse/driver.js/issues/158
私の端末で発生していたのと全く同じ現象でした。
こちらによると、解決策は、driver.js のオプションに animate: false を設定することでした。
こちらを試したところ、確かにアニメーションを無効にしたら要素は正しく表示されることが確認できました。
しかし、やっぱりアニメーションがあった方が要素から要素へ移動するときに自然な気がするし、また、タップで操作をした時に下の要素に反応してしまい、意図しないタイミングで画面遷移をしてしまったりしたので、アニメーションは有効のままがいいですね…。
で、色々調整していたところ、原因が判明しました。
今回ハイライトで表示させたかった要素は、その親要素に position: fixed; を設定してるのですが、こちらを削除したところ、ハイライト時に要素が正常に表示されるようになりました！
てっきり z-index が悪さをしているとばかり思っていたので…盲点でしたね。
気が付けて良かったです。
そして、こちらの要素を position: fixed; を使わずに済むように CSS を調整し、再度動作確認を行ったところ、意図した通りの見た目になりました！
初見時はどうしようかと思いましたが、解決できてよかったです。
以上、「driver.js」ライブラリを使って要素をハイライトしたときに、その要素が真っ白になってしまう時の対処法でした。
ご参考になれば幸いです。
