Strangely, it started happening since Chrome94 and only on my Android phone (while everywhere else it still works fine like in my Android tablet).
When border-radius: 30px; is removed from the class that has backdrop-filter: blur(8px); in it, the DIV now appears with the default sharp corners (that we don't want) but the glassmorphism actually goes back to functioning as expected and the great look starts working again on the phone as well. So the question is,
Is there a way to make the beautiful
backdrop-filter: blur()work without sacrificing the beauty of rounded corners?
Already tried and failed, using pseudo elements like ::before but the result is the exact same.
Also tried and failed applying filter: blur(0px); to the underlying element that is supposed to get blurred but that changed absolutely nothing in my tests.
Note 1: No problems observed on Windows PC Chrome and ASUS tablet Chrome.
Note 2: It used to work fine on the SONY phone too before updating to Chrome94 (that is if my memory is correct)