Save to Pocket 拡張機能のバグでスタイルが壊れてる
◆ スタイルを初期化する CSS が挿入されてページのスタイルが崩れる
◆ Save to Pocket 4.0.0 で確認
◆ Github だとまだこのバージョンがリリースされてないみたい
◆ Save to Pocket 4.0.0 で確認
◆ Github だとまだこのバージョンがリリースされてないみたい
いつも問題なかったページのスタイルが崩れていることに気づきました
最初は更新があってそのせいなのかなくらいに思ってましたが 変更はしていない自分で管理しているところでも崩れが起きてました
ブラウザのバグ?にしてはここしばらく更新してないです
原因はフォントサイズがおかしくなってることのようです
h1 が普通のテキストとして表示されています
devtools で調べてみると 知らないスタイルが挿入されてました
というものです
font が inherit なのでフォントサイズが親から継承されて普通のテキスト扱いされてました
ページ内の style タグや読み込んだ CSS にはそういった記述はなくて devtools では injected stylesheet となってました
拡張機能が書き換えてるようです
そういうことをする拡張機能に心当たりが無いので一つずつ無効にしていくと……
Save to Pocket をオフにするとこのスタイルが挿入されなくなりました
↓の HTML を拡張機能なしで開くと
こうなりますが
Save to Pocket が有効だとこうなります
バージョンを見ると 4.0.0 とメジャーバージョンが上がったばかりのようですし バグのようですね
Github のリリースやタグには 4.0.0 がなく まだ 3 系までなのでリリースされた事自体がミスなのかもしれません
h1 などのスタイルを自分で書いてるページだと そっちが優先されて影響はないですが ブラウザのデフォルトを使っているページだと画面崩れになるので 修正されるまで拡張機能を無効にしておくのが良さそうです
思った以上に早かったです
issue を見てみると まだ色設定の CSS 変数宣言が挿入される問題もあって これは来週 (11/1 の週) に修正予定みたいです
CSS 変数の宣言は挿入されても 同じ名前の変数を使う処理がページにないと意味ないですし h1 みたいに多くのページに影響はしなさそうです
仮に名前が一致しても ページ内で指定している名前なら その名前の変数がページ側で宣言されているでしょうし 挿入される CSS では :root に対しての設定になっていて優先度は低いです
もう直ったものと考えて有効にしても大丈夫そうですね
最初は更新があってそのせいなのかなくらいに思ってましたが 変更はしていない自分で管理しているところでも崩れが起きてました
ブラウザのバグ?にしてはここしばらく更新してないです
原因はフォントサイズがおかしくなってることのようです
h1 が普通のテキストとして表示されています
devtools で調べてみると 知らないスタイルが挿入されてました
header, footer, section, div, span, aside,
h1, h2, h3, h4, h5, h6, p, a, button, form,
input, label, img, ul, ol, li {
vertical-align: baseline;
margin: 0px;
padding: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
border-image: initial;
font: inherit;
}
というものです
font が inherit なのでフォントサイズが親から継承されて普通のテキスト扱いされてました
ページ内の style タグや読み込んだ CSS にはそういった記述はなくて devtools では injected stylesheet となってました
拡張機能が書き換えてるようです
そういうことをする拡張機能に心当たりが無いので一つずつ無効にしていくと……
Save to Pocket をオフにするとこのスタイルが挿入されなくなりました
↓の HTML を拡張機能なしで開くと
<!doctype html>
<h1>h1</h1>
<p>text</p>
こうなりますが
Save to Pocket が有効だとこうなります
バージョンを見ると 4.0.0 とメジャーバージョンが上がったばかりのようですし バグのようですね
Github のリリースやタグには 4.0.0 がなく まだ 3 系までなのでリリースされた事自体がミスなのかもしれません
h1 などのスタイルを自分で書いてるページだと そっちが優先されて影響はないですが ブラウザのデフォルトを使っているページだと画面崩れになるので 修正されるまで拡張機能を無効にしておくのが良さそうです
追記
4.0.1 がリリースされてこの問題が修正されてました思った以上に早かったです
issue を見てみると まだ色設定の CSS 変数宣言が挿入される問題もあって これは来週 (11/1 の週) に修正予定みたいです
CSS 変数の宣言は挿入されても 同じ名前の変数を使う処理がページにないと意味ないですし h1 みたいに多くのページに影響はしなさそうです
仮に名前が一致しても ページ内で指定している名前なら その名前の変数がページ側で宣言されているでしょうし 挿入される CSS では :root に対しての設定になっていて優先度は低いです
もう直ったものと考えて有効にしても大丈夫そうですね