雑記ブログ：Safariリーダーで表示されない
Openfirst published: 2019/02/01last updated: 2019/03/03
ふと、iPhoneのSafariで雑記ブログをリーダー表示してみたところ、ボディが何も表示されないことに気がついた。なんじゃこりゃ。
同じような環境を使っている竜さんのrnoteは表示されているため、Gatsby・Airtable・Netlify・日本語環境のせいではない。
まいのこマートで制作中のカスタム投稿も同じような結果。雑記ブログと構造は似ているが article 下部のリンクだけ一部表示されている謎。雑記ブログにしか使っていない rehype-react は関係ないよう。
Safariのリーダー表示はデベロッパーツールの編集を反映しないっぽいので、ブランチ切ってNetlifyにデプロイして確認する。
- iOS: Safari v12.1.2
- macOS: Safari v12.0.3
ざっと以下の項目を試してみた。
sectionの入れ子をなくしてみるarticleをなくしてみるarticle > sectionをなくしてみる- CSS Gridを解除してみる
- ネストを浅くしてみる
- キャッシュを消す
- コンテンツブロッカー解除（影響なし）
最終的にiOS Safariで表示されたのは、article を使いつつネストを最小限にした場合だった。
ネストが深い場合、articleで囲わないとリーダー対象でなくなったりした。また、macOSは表示されるけどiOSでは出ないなど判定も異なる様子。正直、レギュレーションがよくわからないw
あれ？macOSだと article の中の section を div に変えてキャッシュ消したら出た（localもNetlifyも）。iOSはキャッシュクリアしても相変わらず表示されない。うーむ。
rehype-reactを使った際に、出力要素が div でラッピングされてしまう挙動はパッチで防ぐことができた。
これで div が減り、article 内の section を div に変更したものの、未だに表示されたりされなかったりする。