iPhoneの表示　全てのページが中ほどから表示される

Question

カラーミーで制作している自社サイトですが、iPhoneで表示した際に、どのリンクを押してもリンク先のページが一番上ではなく、中ほどから表示されるようになってしまいました。おそらく数日前からだと思うのですが、いつからかはっきりは分かりません。

PCでgoogleディベロッパーツールのスマホ表示にしたときと、iPhone以外のスマホで表示したときは問題なくページの一番上から表示されました。
解消する方法を教えてください。
https://lohasplaza.shop-pro.jp/

Answer

ECマスターズの田中です。

ページを確認したところ、確かに症状が起こることを確認したのですが、
JavaScriptやCSSなど、多くの仕組みが入り組んでおり、
原因の特定が非常に困難となっております。

取り急ぎの対応として、
ページ読み込み完了時に強制的にページ上端へスクロールする

$(()=>$(window).scrollTop(0));

上記１行のJavaScriptを、任意の外部JSファイル、
もしくはページ中にタグで囲んで
ご記載いただき、改善されるかどうかをご確認願います。

また、おそらくカラーミーから提供されている
テンプレートをご利用されているかと思いますが、
https://shop-pro.jp/template/
どちらのテンプレートをご利用いただいているか、
テンプレートの提供元より同じ症状が出ている旨のお知らせがないか、
同テンプレートのデモサイトもしくは利用事例において
同じ症状が起こっていないか、
ご確認いただきますようお願いします。

Answer

ありがとうございます。
タグを入れてみましたが、改善しませんでした。

カラーミーのサンプルショップでは同じような症状は見られませんでしたが、カラーミーへ問い合わせしてみます。
https://frame-work.shop-pro.jp/

何か他に方法がありましたら教えてください。
宜しくお願い致します。

Answer

ECマスターズの田中です。

同じテンプレートのサンプルショップにて、
確かに症状がないことを確認いたしました。

原因を探るために、
hanako1187さんにてショップにご設置いただいた、
ページ読み込みと同時に動作するJavaScript、つまり
$(function(){
で始まる処理を、一時的に取り外すことで
症状が改善されないかどうか、１つずつ外してみて
ご確認いただきますようお願いします。

特に、

var viewport = document.createElement('meta');
viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0');
document.getElementsByTagName('head')[0].appendChild(viewport);

上記４行では、ページ読み込みと同時に

というタグを〜内に挿入しているのですが、
ページ内のタグを読み込み終わった後に動作することで
見た目がスマートフォン向けになると同時に初期位置がずれる、という可能性もございますので、

差し支えなければ、
上記タグを〜内に直接ご記入の上、
JavaScriptの処理は削除していただきますようお願いします。

Answer

hanako1187さん、こんばんはー。

カラーミー管理画面→開店・閉店設定ページのショップページの【自動改行】のチェックを外してください。

これで直るはずです。###HR######IMG00b2a0ec3d32d44ec9f3ca6783e9b7e5c.jpegIMG0###

Answer

ECマスターズ　田中様

お世話になっております。ありがとうございます。
JavaScriptのご指摘の部分は、現在のテンプレートに元々記述されていたタグです。カラーミーではユーザーがhead内にタグを記述できる場所がなく（どこを探しても記述場所が見当らず、body内にしか記述できません）、ご指摘の変更は残念ながらできませんでした。


shinoshino　様

ありがとうございます。
ご提案の方法を試したのですが、残念ながら改善されませんでした。

Answer

ECマスターズの田中です。

shinoshinoさん、ご助言いただき誠にありがとうございます。

hanako1187さん、
テンプレートに元々記述のこと、失礼いたしました。

症状が改善されていないことを確認しておりますが、
「自動改行」は現在も外れた状態になっておりますでしょうか。
再びチェックをつけ直していただいている場合は、
私にて外れた状態を確認するために、再度外していただけると幸いです。

万が一、他にhanako1187さんにて
ページ読み込み時に動作するJavaScriptを導入されている場合は、
お知らせいただければ幸いです。

カラーミーショップからの返答次第で、
テンプレートの乗り換えもご検討願います。

また、最終手段として
強制スクロールのご検討もお願いいたします。
前回のJavaScriptが動作しなかった、ということで、
タイミングを遅らせる形での動作をお試し願います。

具体的には、下記１行を動作させていただく形になります。

$(window).on('load',()=>setTimeout(()=>{$('html,body').scrollTop(0);console.log('scr')},0));

これでも動作しない場合は、
末尾から４文字目の 0 を、
30 や 60 など、数字を増やして再度ご確認願います。
数字が多くなるほど、強制スクロールのタイミングが遅れていきます。

Answer

ありがとうございます。

shinoshino様にご指摘して頂いてから「自動改行」は外したままにしております。（それまでは自動改行になっていました。）

今回教えて頂いたJavaScriptを挿入したところ、強制的に上部へ飛ぶような形で改善が見られました。一瞬、ページの途中が表示されてから上部へ飛ぶ形でした。
カラーミーの返答がまだないため、カラーミーの方で表示状態確認されるかもしれないと思い、一旦こちらは削除しております。

私の方で入れたものは全ページ共通で適用されるHTMLのタグを記述する部分にこちらを挿入しております。
■一番上



■一番下
//■page topボタン
$(function(){
var topBtn=$('#pageTop');
topBtn.hide();
//◇ボタンの表示設定
$(window).scroll(function(){
  if($(this).scrollTop()>80){

    //---- 画面を80pxスクロールしたら、ボタンを表示する
    topBtn.fadeIn();

  }else{

    //---- 画面が80pxより上なら、ボタンを表示しない
    topBtn.fadeOut();

  } 
});
// ◇ボタンをクリックしたら、スクロールして上に戻る
topBtn.click(function(){
  $('body,html').animate({
  scrollTop: 0},500);
  return false;
});
});

ただ、こちらは、1年以上触っておらず、それまで表示がおかしくなることはなかったので、今回関係しているのか疑問なのですが、いかがでしょうか。

一番よく更新するトップページのバナーやフッター部分のバナー表示をしている部分でちょっとしたHTMLの間違いが原因なのかと、一度その部分を丸ごと削除してみたのですが、改善しませんでした。

現在使用しているテンプレートはカラーミーで唯一商品をカテゴリー登録できる無料のレスポンシブデザインのテンプレートのため、できればテンプレートはそのまま使いたいのですが。

宜しくお願い致します。

Answer

ECマスターズの田中です。

状況をお知らせいただき、ありがとうございます。
「自動改行」を外したままでも、
症状が続いていることを確認いたしました。

差し支えなければ、
いただきました「■一番上」「■一番下」のソースを
全て削除していただいた上で、
表示をご確認いただけますでしょうか。

> ただ、こちらは、1年以上触っておらず、それまで表示がおかしくなることはなかったので、今回関係しているのか疑問なのですが、いかがでしょうか。
弊社内で確認したところ、
PC上Chromeの開発者ツール以外にも、
iOS 12上のSafari・Chromeにて問題がないことを確認しております。

元々、iOS上のブラウザでは、
iframeの高さ指定が無視されたり、
画面に固定されるはずのボタンの表示がコマ送りになるなど、
想定しない表示乱れが発生しやすくなっております。

iOS が13もしくは14に上がる際に
非常に稀な現象の原因がどこかに存在する可能性があり、
それがテンプレートの中、1年以上触れていない箇所の中、
どちらかに含まれている可能性がございます。

原因の所在を確認するためにも、
一度全削除をお試しいただきますようお願いします。

全削除でも改善されないようでしたら、
テンプレートの構造に問題がある可能性がございます。

サンプルショップでは問題なくても、
サンプルショップに存在しない要素が
動作に影響している可能性がございます。
（たとえば、商品ページ上のカテゴリのパンくずリストの文字数など）

その場合は、カラーミーショップからの返答次第で、
私からご案内差し上げた強制的に上部に飛ぶ方法の導入、
有料テンプレートの導入など、ご検討いただきますようお願いします。

また、最初に私からご案内差し上げた強制スクロールの方法を少し修正した
下記タグの動作もお試しいただきますようお願いします。
$(()=>{$('html,body').scrollTop(0);console.log('scrtop')});

Answer

ありがとうございます。

「■一番上」「■一番下」のソースを削除した場合を試しましたが、改善しませんでした。

$(()=>{$('html,body').scrollTop(0);console.log('scrtop')});
こちらのタグは動作しました。
先に試したものよりも瞬時に上部に飛びますので、より違和感なく見ることができます。

自分のiOSをつい先日アップデートしてから表示がおかしくなったように感じていたのですが、iOSとテンプレートの関係で生じている可能性もあるのですね。

カラーミーの返答を待ち、教えていただたタグで対処するか、テンプレート変更を検討したいと思います。
大変分かりやすいご対応ありがとうございました。

iPhoneの表示 全てのページが中ほどから表示される

iPhoneの表示　全てのページが中ほどから表示される