会員サイトをリニューアルしました! 新サイトはこちら

AndroidのGoogle Chromeで、特定の投稿リストブロック・投稿ページ・カテゴリーページが途中で見切れて白く表示されてしまう < 不具合報告

フォーラムをリニューアルしました!
今後は、新フォーラムをご利用ください。

AndroidのGoogle Chro...
 
通知
すべてクリア

[解決済] AndroidのGoogle Chromeで、特定の投稿リストブロック・投稿ページ・カテゴリーページが途中で見切れて白く表示されてしまう

24 投稿
5 ユーザー
12 Likes
2,255 表示
しらこ
(@96ssbike)
Prominent Member
Topic starter
 

こんばんは。
表題の問題が生じたので、報告しておきたいと思います。了さんでは現象が確認できますでしょうか?

現象の内容:AndroidのGoogle Chromeでのみ、特定の投稿リストブロック・投稿ページ・カテゴリーページが途中で見切れて白く表示されてしまいますが、白く表示された部分にも要素自体は存在しているようで、白く表示された要素部分をタップをして、それぞれのリンク先(各ページ)に遷移することはできます。

検証端末:OPPO Reno A/A5 2020/HUAWEI nova 3
検証ブラウザ:Google Chrome

現象が確認されたURLと、その現象内容:
https://tecchan.jp/
→新着記事の11~12記事目の途中から切れる
https://tecchan.jp/entry/
→5記事目の途中から切れる
https://lep-consulting.com/blog/category/column/
→9記事目以降が表示されない
https://swell-theme.com/category/function/
→ページャーが表示されない

といった感じです。

一例の、表示が切れた画像も以下のURLに添付しますね。
https://drive.google.com/drive/folders/190lFRCGOOLxI0mdTOC84N4XOID3j3Fq_?usp=sharing

iPhoneのSafariやGoogle Chromeだと、表示はまったく問題ないです。

大変お手数ですが、お手すきの際にでもご確認いただければありがたいです。

にゃーん .

 
投稿済 : 10/07/2020 5:44 pm
くうか reacted
了(開発者)
(@ryo)
Illustrious Member Admin
 

ご報告ありがとうございます!

追加で一点だけ情報をいただきたいのですが、Androidのバージョンはいくつの端末で確認されたものでしょうか?

 
投稿済 : 12/07/2020 7:22 am
LEP(レップ)
(@sokd1989)
New Member
 

了さんいつも大変お疲れ様です。

実は私からしらこさんに相談してこの現象を検証して頂いたのですが、私の環境ではAndroid8.0.0で同様の現象が起きています!

 
投稿済 : 12/07/2020 9:03 am
しらこ reacted
しらこ
(@96ssbike)
Prominent Member
Topic starter
 

こちらこそ、リプいただきありがとうございます。

私の検証用の端末は、すべてAndroid 9系です(OPPOはColor OSと呼ばれるAndroidをカスタムしたもの、HUAWEIは素のAndroidが入っています)。

にゃーん .

 
投稿済 : 12/07/2020 10:26 am
くうか
(@ku-ka)
Eminent Member
 

横から失礼します。

私も同じ現象が出ているので報告させていただきます。

android9、AQUOSです。

私の場合は新着記事ページのページャーが表示されません。

https://www.kurasitotonoe.com/new-post/

よろしくお願い致します。

 
投稿済 : 13/07/2020 12:56 am
しらこ
(@96ssbike)
Prominent Member
Topic starter
 

@ku-ka さん、ありがとうございます。たしかに表示されませんね。私のOPPO Reno A/Google Chrome(OS・ブラウザともにすべて最新に更新済み)まったく同じ現象が出ています。

にゃーん .

 
投稿済 : 13/07/2020 6:55 am
くうか reacted
sanmarie
(@moko)
Active Member
 

当方も似たような現象が起きています。

Samsung Galaxy A5 (Android 7.8)

カテゴリー・アーカイブ、タグ・アーカイブとも、下方が真っ白になって、それ以上、表示されません。
PCはまったく問題ありません。
写真は端末用ブラウザ Chromeです。

多分、前々回のアップデートの後ぐらいからだと思うのですが、皆さんも同様ですか?

現象が起きている写真を添付します。 

 
投稿済 : 13/07/2020 7:45 am
しらこ
(@96ssbike)
Prominent Member
Topic starter
 

たびたびすみません。マルチサイト化する前のバックアップがあったので、テスト環境にそのバックアップデータと、過去バージョンのSWELLのテーマファイルを差し替えてみて検証してみました。

その結果、以下のパターンになることが判明しました…!

SWELL 2.1.7, SWELL 2.1.7.1→現象が確認される

SWELL 2.1.5, SWELL 2.1.6→現象が確認されない

※他バージョンは試験していません。

にゃーん .

 
投稿済 : 13/07/2020 8:57 am
しらこ
(@96ssbike)
Prominent Member
Topic starter
 

わかりづらいですね…訂正です>バックアップデータを活用してテスト環境を構築した上で、その後にテーマファイルを過去バージョンに差し替えたりして、最近の各バージョンごとに現象の発生有無を確認しました。

という意味です 😰 

にゃーん .

 
投稿済 : 13/07/2020 9:08 am
了(開発者)
(@ryo)
Illustrious Member Admin
 

みなさん、情報共有ありがとうございます...!

2.1.7から、というのであれば、SWELLの何しかしらが悪いっぽいですね... 😰 

急いで原因を探ってみます...!

 
投稿済 : 13/07/2020 2:46 pm
了(開発者)
(@ryo)
Illustrious Member Admin
 

すみません、もう一点だけどなたか検証していただきたいのですが、アーカイブページのタブ切り替えを無効にするとどうでしょうか...?

 
投稿済 : 13/07/2020 2:48 pm
了(開発者)
(@ryo)
Illustrious Member Admin
 

あ、くうかさんのブログはタブなしですね...!

 
投稿済 : 13/07/2020 3:01 pm
LEP(レップ)
(@sokd1989)
New Member
 

お疲れ様です。

参考になるか分かりませんが、私の環境だとリストレイアウトはテキスト型サムネイル型の2つは、ページャーまで表示されました。

 
投稿済 : 13/07/2020 3:26 pm
しらこ
(@96ssbike)
Prominent Member
Topic starter
 

@ryo さん、はい…くうかさんのサイトはタブなしですね 😥 

念の為、私の環境でタブをなしにして(添付の設定にして)、SPカラム数などは一切いじらずに(変更せずに)表示させたところ、やはり同様にAndroid/Chrome環境で途中で切れます。

SPカラム数を増やしたりすると、問題はなくなります(単純に、縦幅が縮小した影響と推測しています)。

にゃーん .

 
投稿済 : 13/07/2020 4:14 pm
しらこ
(@96ssbike)
Prominent Member
Topic starter
 

追記:【問題解消】
AndroidとPCのリモートデバッグを行って、Google Chromeのデベロッパーツールを使用しました。
私のサイト( https://tecchan.jp/ )のトップページでは、以下のHTML修正を行うと問題が解消されましたので報告します。

変更前:

<div id="tab-dcd10a7b-4f14-4af1-bd9e-63513edc9aa9-0" class="c-tabBody__item" aria-hidden="false">

変更後:

<div id="tab-dcd10a7b-4f14-4af1-bd9e-63513edc9aa9-0" class="c-tabBody__item">

ただ「aria-hidden="false"」の部分を削除して問題が解消しただけなので、もしかしたら他の環境で影響があるかもしれません 😞 
取り急ぎ、上記を報告しておきます! 😊 

にゃーん .

 
投稿済 : 13/07/2020 5:43 pm
くうか
(@ku-ka)
Eminent Member
 

はい。タブは使ってませんね(;^_^A

私のブログはカテゴリーページもページャーのところがページによって、見えたり、隠れたり、半分見えてたりします。

LEPさんと同じく、記事一覧設定をカード型からリスト型・サムネイル型・テキスト型に変更した場合は、ページャーが表示されます。

カード型とリスト型(左右交互)は×でした。

 
投稿済 : 14/07/2020 1:12 am
了(開発者)
(@ryo)
Illustrious Member Admin
 

おそらく、解決できました!

試しにSWELL公式サイトにだけ修正コードを追加して以下のページがちゃんと見れるようになったと思うのですが、みなさんの端末だとどうでしょうか...!(前はページャー部分が見えなくなっていました)

https://swell-theme.com/category/function/

対策としては、Android(と念のためIEの時)だけ、以下のようなCSSを追加してタブ切り替え時のanimationをなくすようにしています。

.c-tabBody__item[aria-hidden="false"]{animation:none !important;display:block;}
 
投稿済 : 14/07/2020 1:50 am
了(開発者)
(@ryo)
Illustrious Member Admin
 

型によってもかわっちゃうんですね...謎です... 🤯 

 
投稿済 : 14/07/2020 1:51 am
了(開発者)
(@ryo)
Illustrious Member Admin
 

SWELL公式サイトが無事に表示されているようであれば、今日中にアップデート版リリースします...!

(すみません、今から外に出る用事があるので、夜になってしまうと思います)

 
投稿済 : 14/07/2020 1:53 am
くうか
(@ku-ka)
Eminent Member
 

@ryo

SWELL公式ページ、表示は大丈夫です!

ありがとうございます。お疲れ様です!

 
投稿済 : 14/07/2020 2:05 am
しらこ
(@96ssbike)
Prominent Member
Topic starter
 

@ryo さん

さっそく、ありがとうございます!問題なく閲覧できています。

問題解消した条件:
1. SWELLの https://swell-theme.com/category/function/ は、問題なくページャーが閲覧できています 😊 
2. また提供していただいたCSSを、念の為私のサイトにも追加CSS反映して(単純に上記のCSSを適用しただけだと、環境依存なく一律にすべての環境下で、タブ切り替え時のanimationが消えますが)閲覧テストしてみましたが、問題なく途中で切れないで閲覧できています 😊 

「型」についての私の見解について:
私①:上記のCSSを適用しなかった場合、私の環境下(12記事、閲覧したページは https://tecchan.jp/ の「新着記事」)だと、カード型(SP表示は2カラム)/リスト型/リスト型(交互)だと、途中で切れました。サムネイル型・テキスト型は問題ありませんでした。
私②:上記とは別で、途中で私が試験したテストサイト(7記事)では、カード型+SP表示で2カラムにすると問題はなくなりますが、カード型+SP表示で1カラムにすると、問題が発生されます。
LEPさん(※このスレッドへの返信から引用):テキスト型とサムネイル型の2つは、ページャーまで表示されました。
くうかさん(※このスレッドへの返信から引用):カード型からリスト型・サムネイル型・テキスト型に変更した場合は、ページャーが表示されます。カード型とリスト型(左右交互)は×。

→このような状況なので、このことから得られる仮説は、「型」自体で違いが出るとは考えにくく、単純に縦幅が縮小した影響で閲覧できるようになった(縦幅が一定数伸びると問題は発生する)と、現段階では推測しています 😰 

にゃーん .

 
投稿済 : 14/07/2020 3:31 am
くうか reacted
了(開発者)
(@ryo)
Illustrious Member Admin
 

@96ssbike ありがとうございます!

たしかに、そのようですね…!

なんにせよ、animationとタブの相性がAndroidではアウトっぽいので、単純なdisplayの切り替えで対応させていただこうと思います…!

みなさんご協力ありがとうございましたー!

 
投稿済 : 14/07/2020 4:55 am
了(開発者)
(@ryo)
Illustrious Member Admin
 

修正コードを追加した2.1.7.2をリリースしました!...

 
投稿済 : 14/07/2020 2:31 pm
sanmarie
(@moko)
Active Member
 

アップデート版、どうもありがとうございました。

Sumsung A5(Andorid)にて動作確認。

カテゴリー・アーカイブ、タブ・アーカイブ、

ともに問題なく表示できるようになりました(^^)

 
投稿済 : 15/07/2020 7:58 am
共有: