I have coded a website in Next.js. I decided to have some text boxes in front of the background with backdrop-filter enabled in order to achieve the "glass like" effect. Particularly I have added these lines in css
.textbox {
background: rgba( 255, 255, 255, 0.3 );
backdrop-filter: blur( 10px );
-webkit-backdrop-filter: blur( 10px ); */
box-shadow: 0 8px 32px 0 rgba( 0, 0, 0, 0.18 );
border-radius: 10px;
}
This works very well, as expected. On my pc there is no lag, however on my phone (chrome), i can easily see frame drops and lags when the backdrop filter is applied. If i remove this, it gets again smooth. Is this normal? Is there any solution for this? If i just blur the background it works and there is no lag. But, i don't get the desired result. Thank you.