Safari はスクリプトで動的に与えた id へのスタイルが効かない？

説明

スクリプトにて動的に、ある要素に対して id 値を与える、もしくは id 値を持つ要素そのものを生成しているとする。そこで設定される id に対して CSS でスタイルを定義してても、なぜかそのスタイルが効かないという現象が Safari は発生しがち。ていうわけでテスト。

このページには以下のような CSS が設定されとります。

#p1, #p2, #p3, #p4, #p5 { background-color: aqua }

v51 では、既存の要素に id プロパティ値を設定するケースでスタイルが反映しなかった。 v60 ではさらに、 id 付きの要素そのものを生成するケースでもスタイルが反映しなくなった。

ちなみにスタイルが反映しないのはは id プロパティ値しか設定しなかった場合で、別のプロパティ値も同時に与えるとなぜかスタイルが反映するようになる。 v51, v60 共に。たとえば obj.id='fuga'; obj.className='hoge'; みたいにする。

なんじゃこりゃ。

Safari の隠し機能の Debug メニューを有効にして、Show DOM Tree で様子を見てみると、スクリプトで動的に付加された id 値が DOM ツリーにちゃんと反映されてるのが分かる。つまり、動的生成の id 値に対するスタイル付けのバグくさい。

このバグ（？）は v73 (beta2) 以降、解消したっぽいです。