フォーラムをリニューアルしました!
今後は、新フォーラムをご利用ください。
AndroidのGoogle Chromeで、特定の投稿リストブロック・投稿ページ・カテゴリーページが途中で見切れて白く表示されてしまう < 不具合報告
こんばんは。
表題の問題が生じたので、報告しておきたいと思います。了さんでは現象が確認できますでしょうか?
現象の内容: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だと、表示はまったく問題ないです。
大変お手数ですが、お手すきの際にでもご確認いただければありがたいです。
にゃーん .
ご報告ありがとうございます!
追加で一点だけ情報をいただきたいのですが、Androidのバージョンはいくつの端末で確認されたものでしょうか?
了さんいつも大変お疲れ様です。
実は私からしらこさんに相談してこの現象を検証して頂いたのですが、私の環境ではAndroid8.0.0で同様の現象が起きています!
こちらこそ、リプいただきありがとうございます。
私の検証用の端末は、すべてAndroid 9系です(OPPOはColor OSと呼ばれるAndroidをカスタムしたもの、HUAWEIは素のAndroidが入っています)。
にゃーん .
横から失礼します。
私も同じ現象が出ているので報告させていただきます。
android9、AQUOSです。
私の場合は新着記事ページのページャーが表示されません。
https://www.kurasitotonoe.com/new-post/
よろしくお願い致します。
わかりづらいですね…訂正です>バックアップデータを活用してテスト環境を構築した上で、その後にテーマファイルを過去バージョンに差し替えたりして、最近の各バージョンごとに現象の発生有無を確認しました。
という意味です 😰
にゃーん .
みなさん、情報共有ありがとうございます...!
2.1.7から、というのであれば、SWELLの何しかしらが悪いっぽいですね... 😰
急いで原因を探ってみます...!
すみません、もう一点だけどなたか検証していただきたいのですが、アーカイブページのタブ切り替えを無効にするとどうでしょうか...?
あ、くうかさんのブログはタブなしですね...!
追記:【問題解消】
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"」の部分を削除して問題が解消しただけなので、もしかしたら他の環境で影響があるかもしれません 😞
取り急ぎ、上記を報告しておきます! 😊
にゃーん .
はい。タブは使ってませんね(;^_^A
私のブログはカテゴリーページもページャーのところがページによって、見えたり、隠れたり、半分見えてたりします。
LEPさんと同じく、記事一覧設定をカード型からリスト型・サムネイル型・テキスト型に変更した場合は、ページャーが表示されます。
カード型とリスト型(左右交互)は×でした。
おそらく、解決できました!
試しにSWELL公式サイトにだけ修正コードを追加して以下のページがちゃんと見れるようになったと思うのですが、みなさんの端末だとどうでしょうか...!(前はページャー部分が見えなくなっていました)
https://swell-theme.com/category/function/
対策としては、Android(と念のためIEの時)だけ、以下のようなCSSを追加してタブ切り替え時のanimationをなくすようにしています。
.c-tabBody__item[aria-hidden="false"]{animation:none !important;display:block;}
型によってもかわっちゃうんですね...謎です... 🤯
SWELL公式サイトが無事に表示されているようであれば、今日中にアップデート版リリースします...!
(すみません、今から外に出る用事があるので、夜になってしまうと思います)
@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つは、ページャーまで表示されました。
くうかさん(※このスレッドへの返信から引用):カード型からリスト型・サムネイル型・テキスト型に変更した場合は、ページャーが表示されます。カード型とリスト型(左右交互)は×。
→このような状況なので、このことから得られる仮説は、「型」自体で違いが出るとは考えにくく、単純に縦幅が縮小した影響で閲覧できるようになった(縦幅が一定数伸びると問題は発生する)と、現段階では推測しています 😰
にゃーん .
修正コードを追加した2.1.7.2をリリースしました!...
アップデート版、どうもありがとうございました。
Sumsung A5(Andorid)にて動作確認。
カテゴリー・アーカイブ、タブ・アーカイブ、
ともに問題なく表示できるようになりました(^^)