iphoneでslickが正常に動作していない原因がわかりません。。

Question

###前提・実現したいこと
ここに質問したいことを詳細に書いてください

slickというスライダーの表示エラーについて質問です。

###発生している問題・エラーメッセージ

以下に設置しているslickなのですが、
https://www.rakuten.ne.jp/gold/leffe/claude_n_imgslick.html

これをさらに、商品ページに組み込んで使っております。。
https://item.rakuten.co.jp/leffe/q11493/

PCでは普通に表示され、
私のandroidのスマホでもレスポンシプが効いて設定どおりに見えていますが、
iphoneで見ると崩れている＆超高速に動いてしまっているようなのです。。

修正をしなればいけないのですが、実機がなく問題点がわからず。。

ちなみにスマホでは、中央揃えで幅に合わせて１００％で
表示するように設定しているのですが、
そのiphoneだと縮小が効いておらず、大きいまま右に寄って切れていて、
さらにかなりの速さでずっと横スクロールし続けているような
感じなんです。。

どなたかご確認、また原因となる問題点等をご指摘いただければと思います。。
大変申し訳ありませんが、どうぞよろしくお願い致します。

Comments

[m.ts10806]

実機がなくてもGoogleChromeの開発ツールでAndroidもiOSもある程度特定の機種であれば表示確認できます（もちろん100%同一とは限りませんが）

[saisaitti]

ありがとうございます。試してみたのですが、そちらでは正常に動いておりまして、再現されないもので。。。

Answer 1

初めまして。
手元のiphone(iphone6s iOS10.3.3 safari)で確認してみたところ、

大きいまま右に寄って切れていて、さらにかなりの速さでずっと横スクロールし続けている

というような事象は確認できなかったのですが、
そもそもslick部分が表示されていないようでした。

iframeの指定先である
https://www.rakuten.ne.jp/gold/leffe/claude_n_imgslick.html
はiphoneで確認できましたので、slickではなくiframeの部分にて問題点があるのかもしれません。

[iframe iphone 表示されない]などで検索するとそれっぽい記事もありますので一度確かめてみてはいかがでしょうか？

▼参考URL
インラインフレームの表示方法 | 教えて!goo

Answer 2

私も楽天で似たようなことがしたくて、iPhoneだけどうしてもうまく表示されなかったのですが、海外のサイトで、該当のiframeにidをつけて下記のCSS設定をすると、iframe内でのslickが動作するようになるとの記述を見かけ、やってみたら、うまくいきました。バグ利用的なところがあるので、スマホ専用に読み込むCSSに記述されることをおすすめします。

#SampleiFrameName {
    width: 1px;
    min-width: 100%;
    *width: 100%;
}