在 iPhone 遇到的 CSS 問題

這是最近遇到的狀況。

我在編寫網頁時，網頁有個圖示在電腦版跟手機板要以不同顏色顯示。

網頁版類似下面這樣

而手機版則是

最初我打算用 CSS 的 brightness filter來處理。邏輯如下：

網頁版的圖示顏色是 white（#FFF）；手機是 #adadad。

計算顏色對比差值（0xAD / 0xFF）後，得到 0.6784313725490196 ，將之設為 brightness 的值：

@media screen and (max-width: 412px)
	svg{
		filter: brightness(0.6784313725490196);
	}
}

示意圖

但意外發現，在 iPhone 上居然無法正常顯示，會顯示成純白（因為 fill 為白色）圖片。

換言之就是 filter CSS 沒有運作。

幸好這次的圖片是單一顏色的 SVG 圖，只要改圖片的 fill / stroke 就可以解決。即，改成：

@media screen and (max-width: 412px)
	svg g, svg path{
		fill: #adadad
	}
}

圖片來源

SVG 圖片：Flaticon

背景圖片：Lorem Picsum（圖片ID：445）