WordPressの記事に埋め込んだ要素（oEmbed）の表示崩れを修正する

今まで意識していなかったけどそもそもoEmbedは統一規格らしい。
参考：GitHubのドキュメント

同じ問題の記事を見つけた：ブログカードの表示が変よ

現象が発生するのはiPhoneとMacのSafari。ChromeやFirefoxは表示崩れは発生しない。

自身でも<iframe>タグにposition: absoluteとclip: rect(1px, 1px, 1px, 1px)が付与されているのを確認。開発者ツールでCSSプロパティを弄ると直すことはできる。

どうやら、SafariでCSSのclipプロパティが効いていないのが原因。
ChromeもSafariも<iframe>タグに付与されてるCSSは同じだけど、clipで隠しているのにSafariでは有効にならず見えてしまっている、というのが原因。

MDNのドキュメントではclipは非推奨と記述されている：

このプロパティは非推奨です。代わりに clip-path を使ってください。

私の環境はGutenbergではなくClassic Editorだけど、Gutenbergで同様の問題が発生している記事を見つけた。

remove_action('wp_head','rest_output_link_wp_head');
remove_action('wp_head','wp_oembed_add_discovery_links');
remove_action('wp_head','wp_oembed_add_host_js');

このようなコードがあるか確認してみる。
WordPressデータ全てダウンロードして確認予定。

iPhoneのChromeでも発生。

対処療法でCSSで対応も選択肢に。

WordPress全データ（正確にはwp-content内）を検索したら、WP Rocketのコード内に以下２つがあった：

remove_action('wp_head','wp_oembed_add_discovery_links');
remove_action('wp_head','wp_oembed_add_host_js');

remove_action('wp_head','rest_output_link_wp_head');に関してはGutenberg用だと思うので、今回のClassic Editor（TinyMCE）で現象が発生していることもコレ？

WP Rocketのキャッシュを無効化しても問題は解決しなかった。

7年前の記事だけどSafariでCSSクリップのレンダリングバグについて報告しているスレッドがあった。

デモを見たところ確かにChromeとSafariで見え方に違いがある。

Chrome:

Safari:

解答を見ると、ブラウザハックを使うとのこと。
そもそもこの埋め込み機能はWordPressのもので沢山のサイトで使われているけど、他のサイトはどうなの？という疑問。

oEmbedの埋め込み機能はバージョン4.4から追加されたらしい。

display: noneではなくclipを使っているのは読み上げ機能用らしい。
WordPress標準の.screen-reader-textも同じくclipを使っているのに問題なかったはずなので、WordPress本体をダウンロードしてコードを探す：

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
	word-break: normal;
}

抜き出して以下のプロパティを使うのが良さそう。

抜き出した以下のCSSを追加してiPhone Safari・iPhone Chromeで正常に表示された（iframeが非表示になった）：

iframe.wp-embedded-content {
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	width: 1px;
	word-wrap: normal !important;
	word-break: normal;
}

ひとまずこれで完了。
WordPressの.screen-reader-textのプロパティがこれだけ採用されているのもクロスブラウザ対策だったんだ、というのが分かりました。
（しかしなぜoEmbedのCSSプロパティがこのような形に…）