[Web] Blurred should have consistent blurred size regarding-less to viewport

[softmarshmallow]

should-be-blured-regardingless-to-viewport.mov.mov

(design from 100 days of ui challenge)

Env

• source:figma
• target:web:vanilla
• runtime:web-editor
• OS: Mac12 / Chrome
• code.grida.co

[softmarshmallow]

Seems css has no built in support alias to blur filter defining the viewport.

Here are some tricks we can make it work. (not recommended)
https://stackoverflow.com/questions/12224320/defined-edges-with-css3-filter-blur

[You-J]

It has been confirmed that the issue where scrolling is cut regardless of backdrop-filter or filter is a chrome issue.

Here is a video I tested. chrome, firefox and safari in turn.

❌ - chrome - cut

✅ - firefox - no cut

✅ - safari - no cut