移動端ios螢幕滾動時filter發生抖動閃爍bug

幻靈爾依發表於2019-02-16
iOSFilter

做專案時候有些內容（一段文字）需要高斯模糊效果，就用瞭如下html和css：

//html

<p><span class="circles"></span> <span>知識維度的精熟程度是<span class="filter" style="color: rgb(60, 118, 254);">尚不熟練</span>，在<span class="filter" style="color: rgb(60, 118, 254);">字音，字形，標點符號，病句辨析，圖文轉換，文史常識，文言實詞，文言虛詞，文字理解，詩/詩歌（鑑賞），文章內容，文章標題</span>上急需加強。</span></p>

//css

.filter{
  -webkit-filter: blur(.1rem);
  filter: blur(.1rem);
}

安卓上一切正常，ios經測試下發現螢幕滾動時候出現抖動閃爍甚至空白的問題，百度谷歌百般求助無果，後來試了下給父級盒子加了個overflow:hidden;屬性萬歲一切正常了。
個人理解是fliter屬性會有一些transition動畫，滑動的時候ios引擎渲染優化的不好。
所以最終css改為如下就好了
//css

p{
  overflow: hidden;
}
.filter{
  -webkit-filter: blur(.1rem);
  filter: blur(.1rem);
}

相關文章