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

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キャッシュのクリアはしましたが、状況変わらずでした。

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

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

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

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

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

古い仕様の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ではどのように見えるかお試しいただけますか？

わいひら様

かうたっく様

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

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

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

わいひら様

かうたっく様

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%;が無くなりました。

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

以上でございます。

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

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

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