57月/17
jQueryのドロワープラグインSlidebarsが、Androidでちょっとした問題を起こしていた件について
仕事が終わってまったりしていたら、トランスビットの外の人に「これ原因突き止めといて。じゃ、出かけてくるから!」って投げられた宿題の話です。
AndroidのChromeでページを一気にスクロールさせていると、footerを表示するあたりで一セクション前の部分まで勝手にスクロールして戻ってしまうので、正常な状態に直す。
他のデバイスではなんともないので、cssかscriptだろうとあたりをつけて探っていくと、Slidebars(2系)でした。
スクロールするのみでドロワーメニューをタップしていないにもかかわらず、slidebars.jsが動いて何らかの処理をしてしまう……。
ということで、slidebars.jsを見ていくと、一番最後にありました!
//459行目(最後から2行目)をコメントアウト //$( window ).on( 'resize', this.css.bind( this ) );
PCでウインドウ幅を狭めてスマホ版表示にした時、ドロワー表示用のボタンが出てくるようになっています。
このドロワー表示用のボタンをタップしてドロワーメニューを表示させたままウインドウ幅を広げ、PC版表示にした時、ドロワーメニュー用の領域をきれいになかったことにしてくれるのが、この一文です。
なので、この一文がないと、ドロワーメニューを表示させたままウインドウ幅を広げPC版表示にした時、ドロワーメニュー用の領域が白い帯として残ってしまいます。
そもそもトランスビットではスマホ版でしかドロワー使わないということもあるのですが、
- PCでサイト閲覧してて
- 320pxまでウインドウ幅狭めてスマホ表示にして
- ドロワー出して
- 更にそのままウインドウ幅広げてPC表示に戻したりする
そんな人はいないんじゃないか?
という性善説で、トランスビットでは459行目をコメントアウトして問題なしとなりました。
これで宿題クリアです。
Androidでスクロールすると、ウインドウ再描画してるみたいやなーって思うときがあったんですが、リサイズしてたんですね。
cssやscriptの読込順とかなんか色々関係してるんでしょうか……リサイズ……謎です。