CSSの mask-image を使用して要素を型抜きした際、ローカル環境とテスト環境で表示が異なる現象に遭遇したため、その原因をまとめます。
前提（実装内容）
共通の吹き出し画像を以下の通り mask-image で実装し、6つある吹き出しの背景色を background でそれぞれ変更する実装を行いました。
mask-image: url(../images/fukidashi.svg);現象
環境によって背景色の見え方に違いが発生しました。
- ローカル環境： 背景色が変更されない（消えて見える）
- テスト環境： 背景色が正常に変更される
原因
原因は以下の3点です。
1. 接続プロトコルの違い
ローカル環境では file://、テスト環境では https:// で接続していることが根本的な違いです。ローカル環境であっても、Webサーバー等を介して https://（または http://）で接続すれば、背景色は正常に表示されます。
2. ブラウザのセキュリティ制限（CORS）
mask-image に外部のSVGなどを指定する場合、file:// 環境（ローカルファイルへの直接アクセス）では、ブラウザのセキュリティ制限（CORSポリシー）に引っかかってしまいます。
3. マスク処理ブロック時の挙動
CORSによってマスク処理がブロックされると、要素に設定した background-color ごと画面に表示されなくなります（消えたように見える）。そのため、ローカル環境では「背景色が変更されない（表示されない）」という現象が起きていました。
