何が違うのかをつついてみる
いささかがっかりして手放しそうになったが、EdgeとChromeでどこが元で違うのかを、つついて見ることにしました。
先ずは、やはりHTMLをよーく見るしか。 EdgeにもIE譲りの Edge Developer Tools というのがあり、下はそれでブログタイトル部を調べています。 既に、CSS編集用スキンにはアレンジを加筆した状態です。
右のエレメント枠に、なかなか「::after」擬似要素が見つからなかったが、タイトル要素の一番下方にありました。 見つけにくいのは左のHTML枠に「::after」が表示されないからです。
下はChromeの Dev Tools の表示で、こちらはHTML枠に「::after」が表示されるので、その修飾内容はすぐ右枠に表示出来ます。 しかし、文字がイタリック体でプロパティ操作が出来ません。（inspectorで上書き変更は可能ですが）
擬似要素の扱い方が違うのは、そもそも擬似要素が「特殊」な性質を持っているからだと思います。 擬似要素が両方とも「特殊」な雰囲気を発散しているのを眺めていて、なんとなくEdgeの「position: relative;」を外すと、回転中心がChromeと同じ「o」になりました。 ピンポン。
「relative」指定を外したので、赤マークの配置が擬似要素の本来の位置に戻りましたが、回転中心は設計通りです。
IE/Edhe のバグなのか、擬似要素の特殊性なのか
要するに、Edgeの場合は、回転する要素に擬似要素を指定したのが原因と判りましたが、更に調べると、
● 指定した擬似要素の本来の位置に、回転中心が移動するらしい
●「position: relative;」の場合だけ回転中心が移動する（異常）
●「position: static;」「fixed;」「absolute;」などは移動しない（正常）
と判りました。 原因の本質までは判りませんが、アレンジ上での対処は簡単です。
「position: absolute;」で擬似要素（回転中心のマーク）の配置をすれば良く、見かけ上は同じ結果が得られます。
animation を指定すると自動的に positionの基準位置になる
早速「absolute」指定を試していると、勝手に親要素が基準位置になっている事に気付きました。 本来は基準位置は、一番近い上位（外側）の要素で、static以外の指定がされている要素になります。
上位で該当する要素は、ヘッダー部外枠の[data-uranus-layout="headerInner"]に「relative」の指定がありました。 赤マークの擬似要素に「absolute」を指定して、「top」「left」を「0」に指定すると、ヘッダー外枠の左上隅の基準位置に赤マークが移動するはずです。 ところが、実際は下図の様に「.skin-blogMainTitle」が基準位置になっている様子。
「.skin-blogMainTitle」には「relative」の指定はなく変だと思って「animation」のプロパティを外すと、赤マークはヘッダー外枠の左上隅に移動しました。
これは、何処かに書いてあるのかも知れませんが、意外な事です。 CSSアニメーションを指定した要素は、自動的に「position」の基準位置になるという事です。
ここでは「transform: rotate」ですが、それ以外のCSSアニメーションの場合でもそうなるのかも知れません。
以上をふまえた新しいコード
問題解消の方法が判り、前ページのコードを改めました。
ブログタイトルの「o」に回転中心を持って来る調節は、これまでの通りの方法で、「text-indent」「padding-bottom」の値で調節しています。
新たに追加した回転中心マークの方は「position: absolute」「top」「left」を使って調節しています。 left値の「calc(50% - 1px)」は微調整です。
これで、Edge、IE11も思い通りの表示になりました。 教訓としては、擬似要素周囲は、ブラウザの扱いの違いに注意かな。