css 的 filter blur 在 ios 裝置上的瀏覽器無法正常顯示？

js css css3 blur filter

火爆浪子 2019-08-07 12:04:21 ‧ 3672 瀏覽

這其實就是一張正常的圖，放在網頁上然後打霧
但是我在ＩＯＳ的ＳＡＦＡＲＩ或ＣＨＲＯＭＥ看，都會有類似這樣的情形（有時候可能會有幾條線，有時候就像這樣大面積的走圖）
https://imgur.com/vQ7tXsT

但是我在ＭＡＣ上ＧＯＯＧＬＥＣＨＲＯＭＥ的 toggle device 模擬ＩＯＳ是正常顯示的

這是ＩＯＳ不支持 filter blur 嗎？
還是要用其他方式去支持？

filter: blur(3px);
-moz-filter: blur(3px);
-webkit-filter: blur(3px);

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2019-08-07 14:08:01

最佳解答

你可以再加這兩個屬性試試

-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);

基本上在ios上確實在使用filter的css會有些問題。有支援度的影響。
其實以前早期比較常用的招，是用背景圖透明化來處理。
使用filter真的很常碰到瀏覽器的支援問題，很討厭。

我現在也幾乎不用它了。

火爆浪子 iT邦研究生 1 級 ‧ 2019-08-07 22:24:07 檢舉

可惜還是不行

立即登入回答