「メイド・イン・ヘブン」スキン適用中

Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

iPhone5のブラウザーMobile...
 
共有:
通知
すべてクリア

[解決済] iPhone5のブラウザーMobile Safariでpager-post-naviの表示が崩れます

8 投稿
4 ユーザー
9 Likes
2,457 表示
cocoon-user1206
(@cocoon-user1206)
Trusted Member Registered
結合: 5年前
投稿: 63
Topic starter  

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

古めのiPhone5で申し訳ありませんが、標準ブラウザーmobile safariでpager-post-naviの表示が崩れます。前へと次へのa要素が重なり合ってしまいます。

以下のURLでスクリーンショットを撮らせて頂きました。その画像を添付いたします。

https://wp-cocoon.com/body-margin/

私がセッティングしたCoconnでも同様になります。画像をよく見ると高さが反映されてないのか、重なっているようにも見えます。

Windows PC用のMozilla Firefoxでレスポンシブテストをして、モバイル用ページを表示した場合は問題ありません。おそらくMobile Safariが関連しています。

新しいiPhoneをお使いの方は同様の問題ありませんでしょうか?

 

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


   
わいひら reacted
TM_BB
(@tm_bb)
Eminent Member Registered
結合: 6年前
投稿: 40
 

iPhone 5s ではSafariでキレイに表示されています。


   
わいひら reacted
cocoon-user1206
(@cocoon-user1206)
Trusted Member Registered
結合: 5年前
投稿: 63
Topic starter  

TM_BB さん

教えてくださりありがとうございます。

iPhone5sでは問題ないのですね。一安心です。

iPhone5について

iPhone5は2012年9月21日発売です。iOS 10までサポートされ2017年9月19日にリリースされたiOS 11には対応しませんでした。iPhone5はMobile Safari 10以上にはなりません。

5年以上経過した端末ですので、現状のままで良いと思います。

Mobile SafariをデバッグするにはMac OSが必要であるようなので、原因もわからないです。Webキャッシュのクリアはしましたが、状況変わらずでした。

この端末固有の問題の可能性もあります。

 

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


   
TM_BB reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

僕のAndroidエミュレーターのAndroidブラウザ環境で、不具合が再現できたので、修正してみました。

https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

もしよろしければ、試してみてください。
※ページキャッシュプラグインとブラウザーキャッシュは更新する必要があると思います。


   
TM_BB reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 

古い仕様のios10でどうにか反映できないかなぁ?ってことで、さっき検索してたんですね。

もし万が一、わいひらさんの修正でも反映しない場合、一度お試しいただけますか。

有益情報が書いてあったリンク先は以下です。

https://sitest.jp/blog/?p=10883

こちらに関しては iPhone 用 Safari 特有の Flexbox の不具合となります。親要素や子要素の高さを max-height、min-height、auto またはパーセンテージのみで設定した場合、子要素の高さが認識されない場合があります。

対策としては、高さを明示的に指定するか、親要素の justify-content (または align-items)プロパティを stretch に指定することで回避できます。

このようになってるので、

.pager-post-navi {
	justify-content: stretch;
}

もしくは

.pager-post-navi a {
	justify-content: stretch;
}

あたり、追記してみると潰れないのかもしれない?と思ったりで。

一度子テーマCSSに追記してキャッシュが無い状況で、iPhone5ではどのように見えるかお試しいただけますか?


   
TM_BB reacted
cocoon-user1206
(@cocoon-user1206)
Trusted Member Registered
結合: 5年前
投稿: 63
Topic starter  

わいひら様

かうたっく様

ご回答ありがとうございます。感謝致します。

明日には順番にテストしてご報告したいと思います。

 

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


   
cocoon-user1206
(@cocoon-user1206)
Trusted Member Registered
結合: 5年前
投稿: 63
Topic starter  

わいひら様

かうたっく様

Cocoon最新ファイルをiPhone5のSafariでテストしたところ、不具合は解消されました。

FirefoxでCSSを確認してみました。

旧バージョン

.pager-post-navi a {

padding: 10px;
padding-left: 10px;
margin: 0;
display: inline-flex;
align-items: center;
line-height: 1.2;
font-size: 0.8em;
height: 100%;

}

 

新バージョン

.pager-post-navi a {

padding: 10px;
padding-right: 10px;
margin: 0;
display: inline-flex;
align-items: center;
line-height: 1.2;
font-size: 0.8em;

}

height: 100%;が無くなりました。

 

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

以上でございます。


   
TM_BB and わいひら reacted
cocoon-user1206
(@cocoon-user1206)
Trusted Member Registered
結合: 5年前
投稿: 63
Topic starter  

Wordpressの[外観]→[カスタマイズ]→[追加 CSS]に以下を追加すれば、アップデート前でも不具合は解消しました。

.pager-post-navi a {
height: auto !important;
}

自己責任でお試しください。


   
TM_BB and わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました