LoginSignup
13
10

More than 1 year has passed since last update.

webviewの残像の消し方

Last updated at Posted at 2015-08-17

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

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

原因

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

↓こちらの解説が詳しいです。
http://qiita.com/tkdn/items/5be7ee5cc178a62f4f67

対応策

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

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%と切り替えることで再描画のトリガーが走る。

21'10/21 追記

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

13
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
10