Windows10の無償アップデート終了からはや1週間経ちました。

うちのアホ会社の土壇場でのPCのアップデートが結構大変でしたが、それもどうにかこうにか終わりホッと一息ついていましたが・・・。

 

Microsoft Edgeを触ってみて、EdgeのCSSのバグ？仕様？なものに気づいた。

CSSの書き方の問題もあるのでバグと言い切るには微妙で、仕様にしては「えー？」となる問題だったので、気づいたこととしてとりあえず書いておきます。

 

position fixed & border-radius > position fixed の構造での事象

結構前にIE6の呪縛から解放されて、それから割と頻繁に使っていたposition:fixed。

スマホChromeで位置算出が変だったり他、何かと問題を起こしやすいこのスタイルですが・・・。

Edgeでも「あ！」と気づいた。

position fixedとborder-radiusを一緒にかけた要素の中に更にposition fixedをかけた子要素を配置すると、親要素のウィンドウ追従がガタつく。

<style>
.fix1{
   position:fixed;
   top:10px;
   left:10px;
   z-index:999; 
}
.fix2{
  position:fixed;
  top:10px;
  right:10px;
  z-index:999; }
</style>
<div class="fix1">
  <div class="fix2">子要素</div>
</div>

上記の指定では、.fix1の追従がガタつきます。

確かにこんなことをするのはだいぶ特殊ですが・・・こりゃないよ。

 

position fixedとdisplay inline-blockでの事象

親の要素にposition fixed、子要素にp等要素を入れ、その後でinline-block要素を複数配置して1つ目のinline-block要素だけにfloatをかける。

通常position fixedは、この例の場合、fixedをかけた要素はinline-blockの子要素の長さに応じて収まるように変わるはずだが・・・。

なんとEdgeの場合、これが収まらない。

 

 

IE7～11では起きなかった事象である。無論、他のモダンブラウザでも起きない。

<style>
.tag div{
  display:inline-block; }
.tag .base{
  float:left;
}
</style>
<div class="tag">
  <p>横並び</p>
  <div class="base">子要素1</div>
  <div>子要素2</div>
</div>

上記の指定の場合、.base以降がカラム落ちする。

 

:hover&color&transitionの継承が複雑になった際の事象

このブログでも起きている事象です。更新前に「え！？」となった。

スタイル継承を利用して複雑に:hover擬似要素で、colorとbackground-colorとtransitionを重ねると継承前の色が途中出てきたり、transitionを無視してテキスト色が変わったりする。

というか、普通に何の継承もない場合でもたまーに起きたりするのでなんじゃこりゃ。

 

 

Edgeは動作がIEと比べて軽くなったり、要素検証の機能強化とかJSいじれたりとか、Google Cromeを意識した作りをしているみたいです。

久しぶりにMicrosoft頑張ったなーとは思ったんですが・・・お家芸とまで言えるIEのオレオレ仕様はやはり健在のようですね・・・。

これらで触れたのは氷山の一角でしょうけど、3項めが結構衝撃的で、IE11の時に比べてCSS3の機能関係が弱くなった気がします。

IE10～11でCSS3はほぼサポートされてたのに、それまでのノウハウはいずこへ・・・。

IE9～10への過渡期みたいな印象ですね。

 

まぁ今後のアップデートに期待しましょう。