CSS blur() Performance Issues in Safari

CSS blur() is an interesting function used to blur any element, and it has been supported by most browsers for several years. Recently, it has also been used to create some exquisite effect cards.

However, the problem is that these cards perform poorly in Safari. The reason is that Safari uses the CPU instead of the GPU for rendering. Therefore, adding a meaningless translateZ() or translate3d() can allow the GPU to intervene and compute these blurred elements more efficiently.

filter: blur(100px);
transform: translate3d(0, 0, 0); // Safari hack to turn on GPU
transform: translateZ(0); // Safari hack to turn on GPU