w19さん

恐れ入りますが、グローバルナビが表示されていないというページのURLをご提示ください。

私は只今スマホしかないもので、調査等はできないのですが・・・。

トップページから、5～6つくらいのページにアクセスしてみましたが、すべて表示されておりました。

問題のページを見つけることもできなかったです。

@mk2_mk2 

返信ありがとうございます。

以下のURLです

https://20-greatest-home.com/page-757/

表示されたり、されなかったりするのはデバイスの問題の可能性もありますか？

表示されないときは添付画像のようになります。

w19さん

今手元にスマホしかないもので、何とも言えませんが。

ご提示いただいたページは、私からは以下のように見えています。 

こんにちは。

私のサイトも似たような症状が発生しており、class(item-label)が表示されないことがあります。

常時発生するわけではなく、以下の条件で稀に起こっています。

• iOS(またはiPad OS)デバイスのみ発生
• Chrome・Safari共に起こる
• カテゴリー、タグページなど、一部のページのみで発生

対象URL https://pcningen.com/category/pc/

(私の場合横並びにするためにカスタムCSSを入れているため、それが原因と思っていました)

w19様のページ( https://20-greatest-home.com/category/meeting-sumirin/ )をiPadで閲覧したところ、確かに不具合が再現しました。

ありがとうございます。

pcningenさんの条件と全く同じ起こり方をしていると思います。

現在解決しましたか？

いただいたURL拝見しましたが、メニューはきちんと見えていました。

@w19 

解決していません。

補足ですが、他のページをプレビュー(Safariでリンクを長押し)後に不具合のあるページに戻ると、正常に表示されます。

投稿者:: @pcningen

↑

w19様のページ( https://20-greatest-home.com/category/meeting-sumirin/ )をiPadで閲覧したところ、確かに不具合が再現しました。

投稿者:: @pcningen

↑

対象URL https://pcningen.com/category/pc/

それぞれの表示を確認させていただきました。

Windows系から。

【Chrome】

もしかすると、上記のようにWebKit系のブラウザで発生しているのかもしれないですが、確証はないです。
※iOSのChromeは、WebKitだったと思います。
（私はWebKit系のブラウザはなく、確認はできないです）

投稿者:: @pcningen

↑

class(item-label)が表示されないことがあります。

上記のようにありますが、これはHTMLソース上にないのでしょうか、それともCSSが当たらないということなのでしょうか。
（それ以外？）

w19さん

w19さんの環境は、MacOSのようです。

MacOS・Chromeの環境で、ご確認いただくことは、できますでしょうか。

MacOS・Chromeの環境で再現するかどうか、ご確認いただけないでしょうか。
（EdgeやFirefoxでも良いです）

@mk2_mk2 

デベロッパーツール上の画像の部分(item-label)が表示されない、という意味です。

正常に表示できない場合の例です。

pcningenさん

投稿者:: @pcningen

↑

デベロッパーツール上の画像の部分(item-label)が表示されない、という意味です。

デベロッパーツールではなく、HTMLソースの方にはありますか？

Windows・Chromeだと以下のような感じで表示できますが、WebKit系だと、どうすれば良いのか分からないですけれど。

@mk2_mk2 

すみません、Macは所持していないので確認できません。(iPad等で確認できるのでしょうか？？)

WindowsのChromeで見る限りはitem-labelがあります。

pcningenさん

Android・Chromeであれば、URLの前に「view-source:」を追加すると、HTMLソースを確認できます。

例えば、「 https://pcningen.com/category/pc/」の場合は、以下のようにします。

view-source: https://pcningen.com/category/pc/

iOS・iPadOSのWebKit系で、それができるのか分かりませんけれど 

【追記】

iOS系は、上記ではダメみたいです。

以下に記載がありました。

iPhoneからいつでもHTMLソースが表示できるアプリ「View Source」
https://tcd-theme.com/2020/11/iphone-view-source.html

アプリ（有料）が必要な感じですね。

検索していくつか見てみましたが、やはりアプリを入れる方法ばかり書かれています・・・。

@mk2_mk2 

ブックマークレットを使う方法があったのでやってみました。

ただ、ブックマークレットを発動した瞬間に正常表示に戻ってしまいます。(HTML上にもitem-labelがあります。)

pcningenさん

ありがとうございます。

とりあえず、w19さんにMacOSのChromeなどでご確認いただくと、ある程度分かるかもしれないです。
その結果次第ですけれど、WebKitでCSSがきかないのかもしれないです。
（確証はないですけど、検索してもまだ見つからず・・・。しかしそれだったら、崩れて表示されても良い気もしますし、まったく分からないです） 

僕も表示される環境しか持っていないんですけど、以下の利用環境チェッカーを試すとどのように出力されますか？スクリーンショットいただければ幸いです。
http://mysys-check.com
※表示させたくない情報はモザイク加工などをしていただければ幸いです。

WebKit 16.4 で確認したところ、正常に表示されてはいます。

ちなみに、以下の CSS を書いた場合、正常に表示されますか？

.navi .item-label {
  min-height: 0;
}

@yhira

添付画像の通りとなります。

 IMG_2387.jpg

テーマ情報を載せていなかったので、記入しておきます。

----------------------------------------------
サイト名：PC人間
サイトURL： https://pcningen.com
ホームURL： https://pcningen.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/skin-dark-enji/style.css
WordPressバージョン：6.2.2
PHPバージョン：7.4.33
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
サーバーソフト：LiteSpeed
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.0.1
カテゴリー数：12
タグ数：79
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：14006バイト
functions.phpサイズ：4173バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：5
Auto Post Thumbnail：1
Retina：1
ホームイメージ：/wp-content/uploads/2021/07/84172f_logo_1920_1080.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Akismet Anti-Spam 5.1
Category Order and Taxonomy Terms Order 1.7.5
Colorize Mobile Browser Bar 1.1.0
Contact Form 7 5.7.6
EWWW Image Optimizer 7.0.0
Highlighting Code Block 1.7.0
Jetpack 12.1
Site Kit by Google 1.99.0
WP Multibyte Patch 2.9
WPvivid Backup Plugin 0.9.86
XML Sitemap Generator for Google 4.1.11
XO Security 3.6.2
----------------------------------------------

お返事ありがとうございます。

まずは環境チェックの画像添付します。

次に，iPad Chromeで表示した画像です。

投稿者:: @akira

↑

WebKit 16.4 で確認したところ、正常に表示されてはいます。

ちなみに、以下の CSS を書いた場合、正常に表示されますか？

.navi .item-label {
  min-height: 0;
}

私は効果なしです。

w19さん

投稿者:: @w19

↑

iPad Chromeで表示した画像です。

MacOSの環境はお持ちではなかったでしょうか。

iPadOSではなく、MacOSのChrome等で確認してみたいです。

（そろそろタイムオーバーで、しばらくフォーラムを離れます）

mk2さん

ありがとうございます。

帰宅したらMacOSから開いてみます。

以下のコードに関しても、組み込みますので結果お待ちいただけると幸いです。

.navi .item-label {
  min-height: 0;
}

●現象
同じ現象が再現し。
iPhoneXr、Safariで確認。
グローバルメニューが正しく表示された後、
ページを下にスワイプさせ、リロードすると文字（アイコン含み）消え。

※pcningenさんの場合、Fontawesomeが表示されず。

●備考
一旦、safariを表示したまま、右ボタンをクリックしスリープ。
再度、右ボタンをクリックし、スリープ解除。
その際、safariを上下にスクロールすると表示される場合があり。

chu-yaさんありがとうございます。

MacbookのChromeから確認しましたが、グローバルナビメニューは表示されていました。

しかし、iPadから確認するとコードをCSSにいれた状態でも表示されないページがあることに変わりなさそうです。

w19さん

ありがとうございます。

投稿者:: @w19

↑

MacbookのChromeから確認しましたが、グローバルナビメニューは表示されていました。

そうですか。
同じ端末(MacBook)でも、Chromeだと表示されたということですね。

原因は分かりませんが・・・。
今までの情報からすると、WebKit系(※)のブラウザで起きていると考えられる気がします。
（ただ、WebKit自身では表示されているみたいですけれど）

※各OSのSafari、iOS・iPadOSのChrome等（iOS系は、Safari以外もWebKitのはず） 

Safariで確認できないもので、なかなか難しそうな感じがします。
（他の方に期待・・・）

WebFontに何か？
しかし、他の場所は表示されていますし。

ありがとうございます。

そうなれば、環境系の話になるので解決は難しいということでしょうかね…？

w19さん

簡単ではない気がします。

今のところ、Safariでは多くの方で、この事象が発生していますので、解決はしたいです。

何かのきっかけで原因が分かる可能性はありますので、Safariでいろいろ試していく必要があると思います。

おそらく他の方も、いろいろ調べてくださるはずです。 

mk2さん

皆様に尽力していただき、大変心強いです。

ありがとうございます。

以下のリンク先の「結果」の部分を Safari で見た場合、添付画像のように 3 行の英文は見えるでしょうか？

https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp#%E4%BE%8B

@akira 

ありがとうございます。

見えていました！

@w19 さん

申し訳ないです。原因も修正方法も分かりません。

WebKit では再現できないため、Safari 特有の症状かもしれません。

overflow: hidden や Web フォント、-webkit-line-clamp が関係あるかもと思い WebKit Bugzilla などで検索したのですが、それらしいのが見つからないです。

ちなみに、ブラウザのキャッシュを削除しても治らないのですよね？

私の環境では、SafariだけでなくiOSのChromeでも起きてますね。

(キャッシュやCookieは消去済み、シークレットモードでも発生します。)

Akiraさん

ありがとうございます。

特に変化なさそうです…。

関係のない情報かもしれませんが、最初の4ページくらいまではメニューが表示されますが、以降他のページを開いて周回すると出なくなるような気がします。

ちなみに上記問題は、トラブルシューティングを利用して全てのプラグインを停止しても起こりました。

参考:WordPressのトラブルシューティングを劇的に楽にする「Health Check ＆ Troubleshooting」プラグインの使い方。

▼挙動を動画にしました。長押しでプレビューして戻ると、何故か治ります。
https://twitter.com/pcningen/status/1663486944754515968?s=20

暫定対応となりますが、メニューのナビゲーションラベルからfontawesomeを取り除くことで、不具合なく表示されるようになりました。

そもそも、fontawesomeを挿入する場合、添付画像のような設定方法は間違っているのでしょうか？

投稿者:: @pcningen

↑

そもそも、fontawesomeを挿入する場合、添付画像のような設定方法は間違っているのでしょうか？

Font Awesome関係の問題だったんですね。
他の環境で表示されているので間違っているということはないと思うのですが。

皆様ありがとうございます。

当方もFontAwesome削除してみたところ、問題は解決したようです。

FontAwesome4を使用していたのですが、互換性の問題でしょうか？

ちょっとおしゃれなヘッダーになっていただけに、残念です…。

ちょっとわからないです。
他のブラウザでは表示されていたのでブラウザの不具合の可能性もあるかもしれません。

この問題、いつの間にか解消していました。
(iOS 17にすると不具合が出なくなる、との説もありますが、古いOSでも正常に表示されるようになっています。)

原因は不明ですが、ひとまず報告いたします。

ご連絡ありがとうございます。
おそらく他のトピックで原因の対策を行ったことによるテーマの改善ではないかと思います。