More than 3 years have passed since last update.

webviewの残像の消し方

Last updated at 2021-10-21Posted at 2015-08-17

ハイブリッドアプリ用にjavascriptで画面全体をスライドみたいに次々切り替える部分(※)を実装していて
Android2.3系の端末で前の画面表示が残像が部分的に残る不具合があったのでメモ

※スライドはcssのdisplay:none ⇔ block プロパティ切り替えるだけの簡単なもの
　アニメーション等は無し

#原因
画面表示切替ロジックだけでは画面の一部分だけしか再描画のトリガーが走らず、
→結果、残像が残っていた。

#対応策
画面表示ロジックの後に画面全体に再描画のトリガーを促すための処理を追加。

style.css

.redraw{visibility:hidden;}

slide.js


//切り替え時
$('html').addClass('redraw');

//スライド切り替え処理
//(中略)

$('html').removeClass('redraw');

今回はcssのクラスでvisibility(表示・非表示)プロパティを切り替えて再描画を促しましたが、visibilityがhiddenになるとどうしても一瞬消えて見えなくなるので
それだと困る場合はopacity(透明度)を微妙に変えるだけでも代用できます。

style.css

.redraw{opacity:0.99;}

※透明度を99%⇔100%と切り替えることで再描画のトリガーが走る。

tailwindcssのハンバーガーメニューの開閉でバーコード状の動作残像が残る症状がiPhoneでも発生。
この手法で消えることが確認できたが、この場合は残像が発生するCSSの色プロパティを透明にするなどの見直しが良さそう。