Tobiume Paragliding Report

Tweet

Share on Tumblr

JQueryライブラリーを利用した　「Ad Gallery」

Facebookページに組み込むと動きのあるページにできるのでいくつかテンプレを試しているのですが、Google Chrome　（16.0.912.77 m）でサムネイルリストの表示がおかしくなってしまいます。

スライドショーを何度か繰り返しているうちに、サムネイル・リストが突然改行してしまい、正しく横に並んでくれません。

こちらは正常

こちらが異常

正常ではサムネイルは横に5つ並ぶはずが、何度か繰り返し表示させているうちに、３件目以降のサムネイルが改行されて下に落ちてしまいます。

これはいまのところ、Google Chromeだけで起きており、FireFox3やIE8ではこのようなことはないので、Chrome特有の問題（バグ？）のようです。

上の画像はChromeの右クリックにある「要素を検証」でサムネイルリスト部分を表示させてみたものですが、異常の方では、ad.thumb.listの表示幅が202pxと小さくなってしまっており、これではリストが途中で改行されてしまうのは当然。

スライドショーを表示中に、動的に表示幅が変化していることから、原因はCSSファイルではなくて、Javascriptの方にあると思われるので、さっそく調べてみることに。

Javascriptについての知識はほとんどないのですが、それらしきところ（338行目、342行目）を見つけ適当に書き換えてみたのですが、今度はChromeではうまくいってもFireFox,IEで正常に表示されない。

最終的に、285行目から287行目までの３行をコメント化することで、ようやくChrome,FireFox,IE8でなんとか正常に表示されるようになりましたが、抜本的な解決ではありません。

※同じような症状に困ってある方もおられるかと思い、備忘録を兼ねて書き留めておきます。

// } else{
// thumb_wrapper_width += thumb[0].parentNode.parentNode.offsetWidth;
// thumbs_loaded++;
 

この記事をソーシャルネットワークにシェア　またはEverNoteにクリップできます