本番環境で隠れているのは通知のまちがいでした。

すみません。

親テーマの不具合です。

不具合の原因となったのは、アドミンバーが表示されている場合は上に余白を取るスタイルの不具合修正 の変更です。scss/breakpoints/_max-width-1023.scss の 191 行目 に :has() が使われています。

Firefox は、:has() に対応していません。

参考： https://caniuse.com/css-has

こんな感じの修正になるかもしれません。

body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
  margin-top: 53px;
}

Safari で表示が崩れる原因は分かりません。最新バージョンの webkit では正常な表示でした。lin09 さんがお使いの Safari のバージョンが 15.3 以前なのかなと思いました。

すみません、Firefox使えないの見逃してました。

●経緯
https://wp-cocoon.com/community/postid/70808/

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

@media screen and (max-width: 1023px){
body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
margin-top: 53px;
}
}

を追加しましたところ、FirefoxもSafariも改善されました。

助かりました。

すみません。

はやとちりでした。

Chromeのヘッド部分が空きすぎになりました。

position:sticky

にしたかったのですが、そうするとヘッダが消えてしまいます。

ブラウザ毎に現象が変わるのは難しいですね。

●ご注意

ログインユーザか否かで、表示に違いがあります。
adminバー分の余白を取っており。
通知エリアと、モバイルヘッダー間に余分な余白ができます。

※htmlタグのmargin-top（adminバー分の余白）＋今回のmargin-top（モバイルヘッダー分の余白）

この為、:hasを用い、モバイルヘッダーを持っているか否かでhtmlのmargin-topを変更した経緯があり。

私が書いた CSS では無理です。

以前のアドミンバーの不具合を考慮した場合、アドミンバーの有無で CSS を分ける必要があるかもしれません。

chu-ya さんがご指摘の CSS は、WordPress が _admin_bar_bump_cb() で出力しています。この CSS も考慮する必要があると思います。面倒…。

アドミンバーの高さは var(--wp-admin--admin-bar--height) で取得できるため、使うと便利かもしれません。

いろいろ参考になります。

ありがとうございます。

一応以下のcssハックで問題無く表示されているような気がしているのですが、

@media screen and (max-width: 1023px){
body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
margin-top: 53px;
}
}
_:lang(x)::-internal-media-controls-overlay-cast-button, body {
margin-top: 0px;
}

その場しのぎのような気もします。

もう、どうしていいか分からないです。

●対策案
親CSSの以下の部分を置き換えます。

https://github.com/xserver-inc/cocoon/blob/44656f6cf74989db44ff54fd61661b14679d409f/scss/breakpoints/_max-width-1023.scss#L190-L192

akiraさんの言うように、CSS変数を用いadminバーの高さ分を考慮します。

/* モバイルヘッダー高さ分、余白を設ける */
body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
  margin-top: 53px;
}

/* adminバーがある場合、その余白分を除いた余白とする */
.admin-bar:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
  margin-top: calc(53px - var(--wp-admin--admin-bar--height));
}

おせわになります。

もともとメインで使っているのが、PCもスマホもChromeだったので、正常に表示していると思い込んでいました。

Chromeのみ最初からモバイルヘッダーの高さ分がマージンとしてあったのが、どうしても分かりません。

これが分からないと今回投稿させていただいた問題が解決しません。

私は「mobile-menu-buttons」がposition:stickyではなくposition:fixedになっていることがとても気になっています。

IEは考慮しなくていいのでposition:stickyを使えばコンテンツが後ろにまわるようなことはないのではと思います。

申し訳ありませんが、adminバーの高さを考慮することは、私にとっては二の次です。

サイトを見るユーザーはadminバーは表示されませんから。

私が通知エリアを表示する設定を行ってから、この現象にずいぶん長いあいだ気づけませんでした。

adminバーを非表示にしてSafariやFirefoxでチェックしなかったのは私のミスです。

投稿者:: @lin09

↑

私は「mobile-menu-buttons」がposition:stickyではなくposition:fixedになっていることがとても気になっています。

これはHTMLの構造によるかと思います。
フッター下に、モバイルメニューがある為、fixedを用い、画面トップに固定させており。

画面スクロールの際、メニューを固定にするには、以下の設定があり。
[Cocoon設定]→[モバイル]→モバイルボタン「モバイルボタンの固定表示」

●ご参考

https://b-risk.jp/blog/2023/03/sticky/

chy-yaさま、ありがとうございます。

そうですね。

フッタにもあるからなんですね。

実は、私はヘッダーだけposition:stickyにできないか、やってみたら、全部消えてしまいました。

あと、もう一つ気になっているのが、モバイルヘッダーによって隠れている部分にキャッチフレーズが入っていることです。

私はこのキャッチフレーズの高さをmin-height：43pxにすることで、わざと残したのかと疑いました。

実際に「header-in」をmin-height：43pxにして試みたのですが、どうやってもChrome、Safari、Firefoxを同じように表示することができませんでした。

結局、現在はCSSハックを、使っていますが、何かいい方法があるのではないかと思っています。

Chromeだけを特別扱いするには、JavaScriptかなんかを使わないとできないんでしょうか？

当分はcssハックのままにしておこうかとも思っていますが、かなりモヤモヤしています。

ご連絡ありがとうございます。
Akiraさんとchu-yaさんの案を参考に修正しました。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
https://github.com/xserver-inc/cocoon/commit/831d8c9d7e82f43ff42b29e5973018dee14b9203

投稿者:: @lin09

↑

実は、私はヘッダーだけposition:stickyにできないか、やってみたら、全部消えてしまいました。

笑、そうなんです。私も試しました。
stikcyは、スクロールした際、その要素が、画面トップで、張り付きます。
フッターにある為、画面に表示された時点でお終いになってしまい。

結構、複雑なので、Chromeデベロッパーツールで、要素をクリックして、一つ一つ配置を理解すると、動きが整理できるかと思います。

わいひらさま

お世話になります。

修正版を確認いたしました。

全て問題ありませんでした。

ありがとうございました。

あ、1点質問があります。

テーマをアップデートしたところ、オススメカードに「説明」が表示されてしまいました。

.recommended .widget-entry-card-snippet {
display: none;
}

で対応いたしましたが、Cocoon設定で「説明」を非表示にできるのでしょうか？

もう一つお願いします。

アドミンバーが話題にのぼりましたが。

私はこの点理解不足です。

アドミンバーがある場合は、その下にロゴや通知バーがでるということでしょうか？

現状ではモバイルヘッダーの後ろにロゴが隠れています。

ユーザーには問題無いですし、アドミンバーを非表示にして確認できるので、特に問題ありませんが…

理解不足なので教えてください。

よろしくお願いします。

投稿者:: @lin09

↑

テーマをアップデートしたところ、オススメカードに「説明」が表示されてしまいました。

申し訳ありません。

>わいひらさん
以下が影響している？

https://wp-cocoon.com/community/postid/71696/

 lin09さんが言われるCSSを削除しており。
私の環境では、スニペット自体の要素が存在せず？！

https://github.com/xserver-inc/cocoon/blob/b77f8585d1f87e94190c25d3d499c8523289cac2/style.css#L8442-L8443

投稿者:: @lin09

↑

アドミンバーがある場合は、その下にロゴや通知バーがでるということでしょうか？

●ポイント
先に述べたように、fixedを用い、フタッター下にあるモバイルヘッダーを画面トップに表示させています。
この為、キャッチフレーズ含め全体を、53px下げる必要があります。
下げないと、キャッチフレーズがモバイルヘッダーの下に隠れるからです。

＞わいひらさん

https://wp-cocoon.com/community/postid/71807/

以前削除した、以下を戻して下さい。

.recommended .card-snippet {
  display: none;
}

chu-yaさん、大変親切なご説明ありがとうございます。

後でしっかり読ませていただきます。

実は、後でというのも、ノーマルなCocoonのテストテストサイトを確認したところ、新バージョンでなおっていないようなのです。

テストサイトは以下の情報のように、バージョンは2.6.1.7なので修正版です。

添付のように通知エリアが隠れます。

今回はChrome、Safari、Firefoxの全て同じです。

これについては安心しました。

しかし、本番環境と何が違うのか、よく分かりませんでした。
本番環境の子テーマはかなりCSSで変更してあるので、違いがわからないという状況です。

添付はテスト環境のものです。

以下の情報もテスト環境です。（パスワードがかけてあります。）

----------------------------------------------
サイト名：ブルーレディ
サイトURL： https://slashd.xsrv.jp/cocoon
ホームURL： https://slashd.xsrv.jp/cocoon
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
WordPressバージョン：6.2.2
PHPバージョン：7.4.33
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.1.7
カテゴリー数：43
タグ数：1501
ユーザー数：1
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2023/06/ogp.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Akismet Anti-Spam: Spam Protection 5.2
All-in-One WP Migration 7.76
All-in-One WP Migration Unlimited Extension 2.52
AmazonJS 0.10
Autoptimize 3.1.8.1
Classic Editor 1.6.3
Contact Form 7 5.7.7
Disable XML-RPC Pingback 1.2.2
EWWW Image Optimizer 7.0.2
Jetpack 12.2.1
LightStart - Maintenance Mode, Coming Soon and Landing Page Builder 2.6.8
Otter – Page Builder Blocks & Extensions for Gutenberg 2.3.1
Password Protected 2.6.3.1
Really Simple CAPTCHA 2.2
Regenerate Thumbnails 3.1.5
Search Regex 3.0.6
Shortcode Widget 1.5.3
Throws SPAM Away 3.4.7
UpdraftPlus - Backup/Restore 1.23.6
WP-Optimize - Clean, Compress, Cache 3.2.15
WP Multibyte Patch 2.9
XML Sitemap & Google News 5.3.4
----------------------------------------------

アドミンバーが付くと添付のようになります。

本番環境でアドミンバーが付いていると、ロゴが隠れていますが、アドミンバーを非表示にするとロゴが表示され通知もそのまま残ります。

ノーマルな親テーマではアドミンバーを非表示にすると通知も非表示になります。

本番環境はたぶん私がCSSで何か設定しているのでしょうが、分かっていません。

一応現状の整理です。

よろしくお願いします。

ちょっと調べてみました。

テスト環境と本番環境の違いは以下のCSSが効いているか否かだけの違いみたいです。

@media screen and (max-width: 1023px)
body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
margin-top: 53px;
}

テスト環境でもbodyに「mblt-header-and-footer-mobile-buttons」が指定されていましたので、何故効かないのかが、謎です。

投稿者:: @chu-ya

↑

＞わいひらさん

https://wp-cocoon.com/community/postid/71807/

以前削除した、以下を戻して下さい

こちら元に戻してアップしておきました。
https://github.com/xserver-inc/cocoon/commit/064f78f4e3eff8eeaff2196bd66f81e931730598#diff-b78be019f1dc6d57753ea900c3805b114cd53ab7c0db836cc081836df1b99b7a

おすすめカードのスニペットが表示されない事確認しました。
https://wp-cocoon.com/community/postid/71809/

すみません。

テスト環境が上手くいかない原因が分かりました。

Autoptimizeが入っていて、影響していたみたいです。

お騒がせして申し訳ありませんでした。

このスレッドは解決済みとさせてください。

ありがとうございました。