【解決】mask-imageがChromeで効かない

mask-imageを使ってbackground-colorを抜きたいと思いコードを書いていたが、なぜかbackground-colorの四角い要素しか出てこない…

background-color: #ffffff;
-webkit-mask-image: url('../images/ic-hogehoge.svg');
mask-image: url('../images/ic-hogehoge.svg');
-webkit-mask-size: cover;
mask-size: cover;

Firefoxはちゃんと表示されるのに、Chromeが表示されない…困った…

うんうん唸りながらいろいろな方法を試してみた結果、重要なのは記述の順番だった…！

background-color: #ffffff;
-webkit-mask-image: url('../images/ic-hogehoge.svg');
-webkit-mask-size: cover;
mask-image: url('../images/ic-hogehoge.svg');
mask-size: cover;

webkitをまとめて書き、その下にmask-image・mask-sizeを書くことで問題解決！

めちゃくちゃ時間がかかったのに、解決法が簡単すぎて拍子抜けしてしまった…

以上！