WEB DESIGN (B)LOG

ノンプログラマーなWebデザイナーによるWordpress、HTML5、スマートフォンサイト制作関連などWebサイト制作に関するブログ

jQuery Masonry が Google Chrome / Safariで崩れた原因と解決法

:javascript・jQuery

要素をレンガ風に並べる為のjQueryプラグインとしてお馴染みの、
jQuery Masonry

FirefoxやIEでは正しく表示されるのに、
Google Chrome / Safari では、
正しく高さが取得されず、
個々の要素の縦が潰れたようになってしまいました。

原因は画像のサイズ指定

今回、各要素を画像+テキストにしていたのですが、
その画像のサイズを指定していなかったのがこの現象の原因でした。

SafariやChromeでは、
画像のloadが終わっていないとwidth、heightがうまく取得できないようなので、
jQuery Masonryを使う際には注意したいところ。


最近は画像サイズを入れないことが多かったので盲点でした。

pagetop