楽天市場 Gold スマートフォンサイト

Question

いつもお世話になっております。

スマートフォンサイトを下記のページにて制作しています。

https://www.rakuten.ne.jp/gold/toyamawebshop/sp/

ぱっと見は正常に見えるのですが、
iphoneなどで指で左右に動かすことができてしまいます。
有名な八代目儀兵衛さんのサイトを見ると、左右にぐらつきません。
https://www.rakuten.ne.jp/gold/gihee/sp/

また、右に動かしたときに若干空白が・・・

margin,padding,border等が原因かと思うのですが、
試行錯誤してもなかなか思ったように動作してくれません。

細かい点で申し訳ないですが、よろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

スマートフォンサイトを確認したところ、
店舗内検索窓のキーワード入力欄にて、
「width:100%;」が設定されていることが原因でした。

iOSのSafariでは、要素に
内部で自動的にpaddingを設定するため、
下記ページにて説明されている通りの事態が発生してしまいます。
https://allabout.co.jp/gm/gc/443954/

対策方法につきましても、ページにて説明されております通り、
キーワード入力欄に適用させるスタイルシートに
box-sizing: border-box;
を追加していただければ結構です。
（ベンダープレフィックスは必要ありません）

なお、ご質問いただいた内容とは関係ありませんが、
ページ全体を囲むに、
overflow: hidden;
が設定されておりました。

ブラウザによっては、画面の縦幅がタグの縦幅と認識された結果、
画面がスクロールできなくなる、という可能性がございますので、
特に必要がなければ、削除していただくことをオススメします。

Answer

毎度細かい点にお答えいただきありがとうございます！
無事解決いたしました！