移动端ios屏幕滚动时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);
}