最近、カルーセル + Twitter Bootstrap + retina.js を使用するホームページをリリースしました。
http://www.stelab.nagoya-u.ac.jp/~okumura/index.html
古い MacBook Pro (非 Retina) でこのページにアクセスすると、期待どおりにカルーセルが表示されます。素敵なトランジションで 3 つの画像が自動的に表示されます。しかし、Retina MacBook Pro (Safari 6.0.3 + OS X 10.8.3) で同じページを開くと、1 つまたは 2 つの画像が表示されません。
Retina.js は私の Retina MacBook Pro で正しく動作しているようです。これは、次のページの画像が私の写真の高解像度バージョンに自動的に変更されるためです。そのため、carousel と retina.js の組み合わせは特定の条件下では動作しないと思います。
http://www.stelab.nagoya-u.ac.jp/~okumura/profile.html
Retina Mac で Google Chrome (26.0.1410.65) または Firefox (20.0) を使用しても、同じ結果が得られます。
ホームページを正しく機能させる方法を誰か教えてください。
- カルーセル (Twitter ブートストラップ) http://twitter.github.io/bootstrap/javascript.html#carousel
- retina.js http://retinajs.com