2014年10月14日

【早いけどさ・・・】Google Chromeの背景の問題

最近、「3年後には、PCが全く使えない新人が入ってくるよ。」というつぶやきがあった。
確かに、今時ならスマホかタブレットでPC未経験もありえるか・・・。
ちょっとした衝撃。ジャンボです。



JavaScriptでペソペソ開発しているジャンボさん。
最近はクライアントサイドでも十分に動的な挙動が出来るから良いですね。

ただ、担当案件の都合上、IEは8なんですね・・・。
IE8ってHTML5周りはてんでダメなんですよ・・・。
CANVAS関連なんて使おうとしたら、目も当てられなくなります。

で、動作確認に Google Chrome とかを使用しているのですが、
スクロールした時の挙動がおかしい・・・。

インラインフレームの様にスクロールでオーバーフロー処理している所があって、
ウィンドウサイズに合わせて、当該の要素を拡大縮小する様にした所、
要素内のスクロールをすると、当該要素の背景画像がズレズレに・・・。

15パズルの様にスクロール付近の背景画像のみ動いて、
他はそのまんま・・・。

再度、ウィンドウサイズを修正すると元に戻ったり、
IE10とかで見た所、特にそんな問題は発生せず・・・。

おそらく、Google Chrome の
挙動を早くさせるための処理付近に問題がありそう。

そんな訳で、対応した方式が以下の通り。


$(document).ready(function() {
$([問題発生要素]).scroll(function() {
if($([問題発生要素]).find('.dummy').length > 0) {
$([問題発生要素]).find('.dummy').romove();
} else {
var dummy = $('<span class="dummy"></span>');
$([問題発生要素]).append(dummy);
}
});
}


簡単に言えば、問題要素をスクロールした際、
ダミーの要素を挿入し、再度スクロールしたらダミー要素を削除。
これを繰り返すことで、GoogleChromeにスクロール内の要素を再描画させてみた。

最初は挿入後に即削除をしてみたのだけど、全然ダメ。
Timeoutとか設定して、数秒後に削除としても状況は変わらず。
上記の方式に収まった。


同じ現象に悩む方がいたら、参考にどうぞ。


posted by ジャンボ at 23:00| Comment(0) | TrackBack(0) | 雑記:PC | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/407130672

この記事へのトラックバック