iphoneXでの見え方と、その他の機種やスマホビューでの見え方の差につきまして。

Question

お世話になります。
楽天のスマホページに、ECステーションの

①画像付店舗ニュース専用（INF-B1）
②レビュー専用1行ラインティッカー（RW-T01）

を設置しています。
iphoneXで見ると、①の影響で画面が少し縦にブレます。他の機種やスマホビューではブレません。
②に関しまして、iphoneXと他の機種やスマホビューとでフォントの大きさが変わります。

③イベント告知くん

また、③をスマホトップページ、商品ページ、カテゴリーページそれぞれに設置していますが、iphoneXで見た際に商品ページで少し乱れが生じます。他の機種やスマホビューでは乱れません。

この解決策は何かあるでしょうか。

Answer

ECマスターズの田中です。

iPhoneX実機を用意の上、確認を進める必要がございますので、
回答まで今しばらくお待ちいただきますようお願いいたします。

Answer

お世話になります。
②は今外しましたので、①と③をご検証頂けたらと思います。
よろしくお願い致します。

Answer

ECマスターズの田中です。

お待たせいたしました。

「１．画像付店舗ニュース専用」は、
トップページの「INFORMATION」以下の部分でよろしいでしょうか。

私にて、この部分の「詳しくみる > >」が、
次の項目にかかるように表示されることを確認いたしました。

こちらは、プログラムの中で
１回毎にスクロールする高さを決定する時に、
基準となる最初の要素の題名部分が、１行分の高さしかなかったことが原因です。

お手数ですが、

ECステーションの管理画面
→にぎわいRMIX
→テンプレート編集

より、
お使いのテンプレートをクリックしていただき、
画面下の「ヘッダパート」に含まれている

/*◇◇◇ニュース部分の設定◇◇◇*/

.data{

の直下に、

height: 3em;
line-height: 1.5em;

以上２行を追記していただきますようお願いします。

追記していただくことにより、常にテキストの高さが２行分確保され、
正常にスクロールするようになります。

なお、
商品ページ内の「３．イベント告知君」につきましては、
弊社の端末にて、表示乱れを確認することができませんでした。

弊社にて確認したイベント告知君のスクリーンショットをお送りしますので、
この中で乱れている部分、もしくはShujiさんにてご確認いただいた乱れなどございましたら
改めて返信にてお知らせいただきますようお願いします。###HR######IMG013d27e795fe8d9827194d3aa40f545c4.pngIMG0######BR###

Answer

ご回答ありがとうございます。
イベント告知君につきましては一時的なものだったようです。

にぎわいrmixの方はご指示通りのソースを追記してみたものの改善されませんでした。
他に何かまだ術があるでしょうか。

Answer

ECマスターズの田中です。

> イベント告知君につきましては一時的なものだったようです。

承知しました。
また表示乱れなどございましたらお知らせください。

> にぎわいrmixの方はご指示通りのソースを追記してみたものの改善されませんでした。

確認したところ、私よりご案内差し上げた

/*◇◇◇ニュース部分の設定◇◇◇*/

.data{

ではなく、

/*◇◇◇ニュース日付の設定◇◇◇*/

.date{

の下に、２行が追記されておりましたので、
お手数ですが、 .date{ 直下から .data{ 直下へ、
２行を移動していただきますようお願いします。

Answer

お世話になります。
失礼致しました。
ご指示を頂いた場所に追記をしましたところ、スクロールの乱れは改善されました。
ありがとうございます。

しかしながら、縦のブレはまだ改善されません。
どうすればブレが無くなるでしょうか。

Answer

ECマスターズの田中です。

縦のブレ、について、改めて確認させていただきたいのですが、
各種iPhone・PCを問わず、
直上のスクロールバナーに比べ、
確かに、コマ落ちしているような動きに見えます。

このコマ落ちしたような動きのことを指している、
ということでよろしいでしょうか。

Answer

お世話になります。

スクロールして１番下の枠が下限に達した際、その下に配置している目玉商品から下がやや下にズレるのですが、それをコマ落ちと言うのであればその動きのことです。

Answer

付け加えまして、最初に記載しております通り、スマホビューやPC、タブレットでは
そのズレる動きが見られず、自分が使用しております実機のiphoneXでのみ起こります。

Answer

ECマスターズの伊藤です。

縦のブレの詳細ありがとうございました。
目玉商品から下がずれてしまう現象を
確認さていただきました。

> 付け加えまして、最初に記載しております通り、スマホビューやPC、タブレットでは
> そのズレる動きが見られず、自分が使用しております実機のiphoneXでのみ起こります。

iPhoneのみ、IFRAMEの高さが
表示される内容によって、自動的に変更されれます。
スクロールすると中の要素数がかわるため、
IFRAMEの高さが変わってしまい
その影響でiPhoneのみに発生しておりました。

こちら回避方法ですが、
IFRAMEの部分の修正と、CSSの追加をお願いいたします。

＝＝＝＝＝修正前＝＝＝＝＝

この部分に最新情報が表示されます
＝＝＝＝＝＝＝＝＝＝＝＝＝
↓↓↓
＝＝＝＝＝修正後＝＝＝＝＝


この部分に最新情報が表示されます

＝＝＝＝＝＝＝＝＝＝＝＝＝

＝＝＝＝CSS追加＝＝＝＝＝
#iframe-container{
    width:100%;
    height:450px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝

Answer

お世話になります。

ご回答ありがとうございます。
因みにCSSの追加はECステーションの方でしょうか?
それですとどこに入れたら良いでしょうか。

Answer

ECマスターズの伊藤です。

> 因みにCSSの追加はECステーションの方でしょうか?

こちらは、読み込みがされているCSSでしたら
どこに追加頂いても問題ございません。

ECステーションのCSSに追加頂いても大丈夫です。

Answer

お世話になります。

ソースの変更とCSSの追加をしたのですが、変化が見られません。
下記で合っていますでしょうか。

【ソース】


この部分に最新情報が表示されます



【CSS追加場所】
/*------------------------------------------------------------
●全体設定
------------------------------------------------------------*/

body{
margin: 0;
font-family: "ＭＳ Ｐゴシック","平成角ゴシック",sans-serif;/*フォントタイプ*/
overflow:hidden;
}

#iframe-container{
width:100%;
height:450px;
overflow:auto;
-webkit-overflow-scrolling:touch;
}

Answer

ECマスターズの伊藤です。

申し訳ありません、ご案内が間違っておりました。


#iframe-container{
width:100%;
height:450px;
overflow:auto;
-webkit-overflow-scrolling:touch;
}


として、iframeと同様の箇所
（の下になど）に
追加していただけますでしょうか。

お手数おかけいたしますが、修正のほど、
どうぞよろしくお願いいたします。

Answer

お世話になります。

頂いたソースを加え、heightを520にしたところ、
実機のiphoneでブレがなくなりました。
ありがとうございます。

因みにスマホビューではサイドにスクロールバーが表示されているのですが、
他の端末でもこのように表示がされるのでしょうか。###HR######IMG0672a04a6bbc9f3a4f6c299549d0bca87.pngIMG0######BR###

Answer

ECマスターズの伊藤です。

> 頂いたソースを加え、heightを520にしたところ、 
> 実機のiphoneでブレがなくなりました。 
> ありがとうございます。 

修正いただきまして、ありがとうございました。

> 因みにスマホビューではサイドにスクロールバーが表示されているのですが、 
> 他の端末でもこのように表示がされるのでしょうか。 

基本的に、スマートフォンではスクロールバーは表示されませんが
気になる場合は、
overflow:auto;
を
overflow:hidden;
としていただきますと、ご指定の箇所のスクロールバーが
非表示となります。