1

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.

Manos Pan
  • 13
  • 4

0 Answers0