Html CSS背景滤镜模糊效果在Chrome中未对齐

我有一个固定高度的父div，以及一个延伸到父div之外的子div。在Chrome 75中，这将导致父div的背景过滤效果应用于预期区域之外。IOS/Safari不会发生这种情况

试试看：

Firefox或Edge根本不支持背景过滤器。不确定其他平台/浏览器

请注意：您需要在中激活“实验性Web平台功能”chrome://flags 以查看模糊效果

这是一个Chrome bug还是我做错了什么。如果它是一个bug，是否有一些CSS解决这个问题的方法

正文{
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/USAF-1951.svg/1024px-USAF-1951.svg.png);
}
.家长{
背景色：rgba（255,0,0,0.5）；
高度：100px；
背景滤镜：模糊（20px）；
-webkit背景滤镜：模糊（20px）；
}
.孩子{
背景色：rgba（0,255,0,0.5）；
宽度：300px；
高度：300px；
}

具有固定高度、红色背景和“模糊”背景过滤器的父对象，该过滤器应显示在父对象中，但由子对象向下移动。
具有绿色背景的子对象，延伸到父对象的外部。

这是Chrome 75中的一个bug。背景过滤功能在Chrome 76中正式启动，该缺陷（以及其他许多缺陷）在Chrome 76版本中得到修复。

这是Chrome 75中的一个缺陷。Chrome76正式推出了背景过滤功能，这个bug（以及其他许多bug）在Chrome76版本中得到了修复