backdrop-filter 导致动画卡顿问题

最近在学习 tailwindcss，就是用 tailwind css 、headless UI 模仿 seeseed 做了一个网站，封装了一个modal之后，发现动画在4K显示器中特别卡顿，即使使用 translateZ(0) 开启硬件加速也没用。而在另一个1080P的显示器中正常。通过多方排查返现：是由于遮罩层加了一个css 属性 ，backdrop-filter ，这是属性的作用是添加一个毛玻璃效果。看了下兼容性，大部分现代浏览器是没问题的。

在网上查找一番，大家都说添加backdrop-filter会卡顿，推荐使用 transform: translateZ(0); 开启GPU加速题提高性能。

我的电脑是一台 NUC8-i5-BEH , 显卡据说是核显里面还算可以的 ntel Iris Plus Graphics 655。当然比起一些独立显卡，还是比较弱，只能满足办公需求。 即使开始GPU硬件加速，依然是肉眼可见的掉帧。看来这个backdrop-filter很耗费性能啊！！！

MDN上的描述：

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。以下是一些属性

/* 关键词值 */
backdrop-filter: none;

/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> 滤镜函数值 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;

这是一个介绍 filter 与 backdrop-filter 的文章
https://github.com/chokcoco/iCSS/issues/147

文章有一个点就是说： 发现其实两者并无多大性能上的差异， 这个其实是不正确的，可能作者没有在一个高分辨率的显示器中测试，在我电脑上 4K 显示器中， blur 也会有卡顿，但是比起 backdrop-filter 还是要好一点。