現在デフォルトスキンとして「 Fuwari -海松茶(みるちゃ)-」を適用中。

iPhone5のブラウザーMobile Safariでpager-post-naviの表示が崩れます | Cocoonテーマに関する質問 | Cocoon フォーラム

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
Share:

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

  RSS

cocoon-user1206
(@cocoon-user1206)
Eminent Member
参加: 8か月 前
投稿: 37
2019年1月31日 22:32  

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

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

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

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

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

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

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

 

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


わいひら 件のいいね!
TM_BB
(@tm_bb)
Eminent Memberサイト
参加: 1年 前
投稿: 38
2019年2月1日 13:53  

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


わいひら 件のいいね!
cocoon-user1206
(@cocoon-user1206)
Eminent Member
参加: 8か月 前
投稿: 37
2019年2月1日 18:26  

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 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 5863
2019年2月1日 19:27  

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

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

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


TM_BB 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3013
2019年2月1日 19:30  

古い仕様の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 件のいいね!
cocoon-user1206
(@cocoon-user1206)
Eminent Member
参加: 8か月 前
投稿: 37
2019年2月1日 21:53  

わいひら様

かうたっく様

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

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

 

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


cocoon-user1206
(@cocoon-user1206)
Eminent Member
参加: 8か月 前
投稿: 37
2019年2月2日 21:08  

わいひら様

かうたっく様

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わいひら 件のいいね!
cocoon-user1206
(@cocoon-user1206)
Eminent Member
参加: 8か月 前
投稿: 37
2019年2月2日 21:17  

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

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

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


TM_BBわいひら 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:11ヶ月

「12ヶ月」「24ヶ月」「36ヶ月」契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:2年11ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:15年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:9ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon
  
動作中

ログイン または 登録 してください

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