| Summary: | 100vw by 100vh filter not being updated on window resize | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | veerkampmenno | ||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | ahmad.saleem792, bfulgham, dino, simon.fraser, webkit-bug-importer, zalan | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | WebKit Local Build | ||||||
| Hardware: | PC | ||||||
| OS: | Windows 10 | ||||||
| Attachments: |
|
||||||
Thank you for the report! This screenshot looks like Chrome, does it affect WebKit? Also, could you please attach the source of the test case or provide a link, so that we wouldn't have to retype it? I wasn't sure if i could post links here but here you go: The issue first appeared on my personal website (https://www.mennoveerkamp.com). To make it easier to troubleshoot i reproduced the issue on codepen(https://codepen.io/MennoVK/pen/poOaMRe). I have tested this issue in Chrome, edge, Opera and Firefox. The issue happens in all those browsers EXCEPT Firefox. (In reply to Alexey Proskuryakov from comment #2) > Thank you for the report! This screenshot looks like Chrome, does it affect > WebKit? > > Also, could you please attach the source of the test case or provide a link, > so that we wouldn't have to retype it? I see i posted a new comment instead of replying to you. So check out the comment below. (In reply to veerkampmenno from comment #3) > I wasn't sure if i could post links here but here you go: > The issue first appeared on my personal website > (https://www.mennoveerkamp.com). > To make it easier to troubleshoot i reproduced the issue on > codepen(https://codepen.io/MennoVK/pen/poOaMRe). > > I have tested this issue in Chrome, edge, Opera and Firefox. The issue > happens in all those browsers EXCEPT Firefox. Able to reproduce on WebKit (261814@main) using above CodePen where Filter does not work compared to Chrome Canary 113. Adding a filter: blur(0) on the element that has the backdrop filter will fix the issue. |
Created attachment 465423 [details] Filter not fullscreen after making windowheight larger When applying a filter to a fullscreen html element (100vw by 100vh), the filter will not resize on window resize. The element will be full width and height, but the filter still shows up on the old resolution. After a refresh the filter works on that resolution again, but going to a bigger screen / higher resolution will break the filter again. Issue can be recreated with code in attachment. In codepen slide up the bar between the code and the content. Or on a webpage go into developer tools -> make the windowheight smaller -> refresh browser -> make screenheight bigger again.