Research on compatibility solutions for frosted glass CSS special effects

The UI girl insisted that I support the so-called "frosted glass" effect on the custom Webview of the Android system, saying that it must be implemented, otherwise the soul of the design would be lost. No matter how much I explained, she just wanted it, wanted it, wanted it!

There is no other way, just study it for a while!

1. Is backdrop-filter a cheat code?

The frosted glass effect is quite common on iOS systems, such as in the message notification bar, mobile assistant cards, etc., so let’s open Apple’s official website and take a look!

As expected, the navigation bar uses the "frosted glass" special effect of the "family design" !

Open the console and copy the homework:

The main use of the backdrop-filter CSS3 property, so I just used it.

The main card CSS code is as follows:

 .card - backdrop - filter {
 position : relative ;
 z - index : 1 ;
 width : 600 px ;
 height : 300 px ;
 border - radius : 6 px ;
 padding : 10 px ;
 color : #fff ;
 font - size : 16 px ;
 overflow : hidden ;
 margin : 100px auto ;
 backdrop - filter : blur ( 10 px ) ;
 background - color : rgba ( 255 , 255 , 255 , 0.72 ) ;
 }

The effect looks good in the Chrome browser:

Then I tried it on a mobile device with an older Android version, and it didn’t work!!!

I checked the compatibility: backdrop-filter -- caiuse[1] .

Emmm~, considering the modified Webview kernel of our company...

We need to find another way. Here is an additional point: filter[2] can be understood as a filter, and backdrop-filter is to set a filter effect for the background. The filter effects currently supported by CSS are:

 blur ( ) : blur
 brightness ( ) : brightness
 contrast ( ) : contrast
 drop - shadow ( ) : shadow
 grayscale ( ) : grayscale
 hue - rotate ( ) : hue rotation
 invert ( ) : invert color
 opacity ( ) : transparency
 saturate ( ) : saturation
 sepia ( ) : brown

If compatibility is not taken into consideration, backdrop-filter will directly display the background color on unsupported browsers, which means the set effect will be lost ("experience degradation").

If the UI lady and PM brother can agree, it is highly recommended that everyone use it. After all, who doesn’t want to get off work early to study?

2. Try filter?

Another CSS property for setting blur is filter, so our other idea is to use filter to simulate the effect of the backdrop-filter property.

And the filter compatibility will be better: filter -- caiuse[3] .

Let's look at the difference between the filter and backdrop-filter effects:

 /* How to write filter, replace the backdrop-filter attribute with filter */
 .card - filter {
 position : relative ;
 z - index : 1 ;
 width : 600 px ;
 height : 300 px ;
 border - radius : 6 px ;
 padding : 10 px ;
 color : #fff ;
 font - size : 16 px ;
 overflow : hidden ; /* Hide content that exceeds the element area*/
 margin : 100px auto ;
 filter : blur ( 10 px ) ;
 background - color : rgba ( 255 , 255 , 255 , 0.72 ) ; 

This effect is very different from the actual design requirements, so it needs to be modified!

3. Filter combination

Because the filter sets the blurriness of the entire element, rather than acting as a background container for the element, a placeholder element of the same size as the card is needed to set the blurriness separately and serve as a background element.

3.1.::before + Fixed double background image

I am being lazy here and directly use the pseudo-element ::before. In actual scenarios, for compatibility reasons, it is recommended that you use div block-level elements as placeholders .

 .card - filter :: before {
 content : ' ' ;
 position : absolute ;
 top : 0 ;
 right : 0 ;
 bottom : 0 ;
 left : 0 ;
 z - index : - 1 ; /* Put it at the bottom of the current card-filter element*/
 filter : blur ( 10 px ) ; /* blurriness*/
 background : url ( http : // p2 .qhimg .com / bdr / __85 / t01781bd4b1218329e1 .jpg ) no - repeat center fixed ;
 background - size : cover ;
 }

Note here that the card uses the same background image properties as the entire container. The background image is fixed in fixed mode, so that when the element is scrolled in any direction, the background image will not move, ensuring that the background effect is consistent .

The effect of moving

3.2. Expand the container using negative values ​​of margin property

The effect of blur is as shown in the figure below. There is still a difference because the filter is a filter that converges inward from the outer border of the container, resulting in a white circle on the outer border of the filter .

At this time, you only need to expand the container size of the ::before element. Here, you can directly use the negative value of the margin attribute to expand the container .

 .card - filter :: before {
 ...
 + margin : - 20 px ;
 }

The effect at this point is a bit "right", and it looks like it will be completed soon .

3.3.::after fills the disappeared background color

The background-color: rgba(255, 255, 255, 0.72); originally set on the .card-filter class did not work!

Because the ::before pseudo-class acts on the .card-filter element, which is its child element, and because the background attribute of ::before sets the background image, it covers the background color of the parent element .card-filter.

Now that we know the reason, we can add another child element (pseudo-class) to the .card-filter element to set the background color!

If you are lazy again, you can directly use the ::after pseudo-class without modifying the DOM structure.

 .card - filter :: after {
 content : ' ' ;
 position : absolute ;
 top : 0 ;
 right : 0 ;
 bottom : 0 ;
 left : 0 ;
 z - index : - 1 ;
 background - color : rgba ( 255 , 255 , 255 , 0.72 ) ;
 }

At this point, the effect is similar to that of backdrop-filter:

The effect can also be seen when it is put into the "self-developed" Webview kernel!

IV. Conclusion

In general, if you can convince the product manager and the UI lady, we will use backdrop-filter. If you can't convince them, we will use a combination of filters to simulate it!

In addition, the backdrop-filter attribute has performance issues. What I mean is, it’s 2022, please upgrade your devices!

If the "frosted glass" and the background do not move relative to each other as described in the article, just ask the UI girl to cut the picture to solve all compatibility & performance issues directly!

During the research, I also tried SVG's feGaussianBlur tag. The effect is the same as the filter, which is a little more complicated, but it is also a feasible solution. You can try it yourself.