移动端ios屏幕滚动时css样式filter属性发生抖动闪烁bug

做项目时候有些内容（一段文字）需要高斯模糊效果，就用了如下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);
}

转载于：https://blog.csdn.net/weixin_34050519/article/details/88683427