Edge 17でのネストしたカスタム・プロパティーとショートハンド・プロパティーにおけるバグ

タイトルまま。Edge 17ではmarginプロパティーなどのショートハンド・プロパティーでカスタム・プロパティーをネストして(calc()などと共に)利用すると、値が解決できず0になってしまう。Edge 16では問題なく解決できるので、リグレッション・バグということになる。

View Demo: Shorthand Property and Nested Custom Property

デモでは二番目の要素でネストしたカスタム・プロパティーを利用している。一番目の要素では普通の(?)カスタム・プロパティーで、うまく解決できている。二番目では解決できておらず、本来は1rem確保されるはずのマージンが0になっている。他の現行ブラウザーやEdge 16では問題ない。

2018-05-10現在、このウェブサイトでもそこかしこでバグっている。グローバル・ナビゲーションやhr要素で目立つ。

CSS側でショートハンド・プロパティーを使わない、という対処で簡単に直せる。しかし最小化ツールがショートハンドにまとめてくれたりしてしまい、直したつもりがプロダクションでは直っていないということもある(やった)。ここに注意すればブラウザーのアップデートを待たずに修正できるだろう。


条件がなかなかシビアで、ショートハンド・プロパティーで使った場合のみ起こることに気付くまで時間がかかった。既にEdgeのイシュー・トラッカーに同様の報告があるが、1か月経つのに確認されておらず、不穏だ。すぐには直りそうもないので、前述のようにCSS側で対処する方が良いだろう。