下面的代碼創建了一個圖像和一個位于圖像頂部的絕對定位的div:

<div style="width:200px; height:120vh; position:relative;">
  <div style="backdrop-filter:blur(20px); position:absolute; width:100%; height:100%;"></div>
  <img style="width:100%; height:100%;" src="https://i.imgur.com/kql1Bt8_d.webp?maxwidth=520&shape=thumb&fidelity=high">
</div>

https://jsbin.com/husuvavami/edit? html，輸出

請注意，在靠近視口邊緣的地方，模糊度會降低。作為參考，下面是我看到的樣子。這在Chrome和Firefox中都會發生，所以我猜這是意料之中的行為。我想知道它為什么會這樣？

編輯:從下面的評論來看，這似乎不是預期的行為?？赡苁俏业?Linux+Nvidia)硬件出現了某種問題，雖然@rx2347提到他們可以在MacOS上復制最新的Chrome，但只是在第一次加載頁面時。