Bug 253835

Summary: 100vw by 100vh filter not being updated on window resize
Product: WebKit Reporter: veerkampmenno
Component: Layout and RenderingAssignee: 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:
Description Flags
Filter not fullscreen after making windowheight larger none

veerkampmenno
Reported 2023-03-13 09:54:56 PDT
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.
Attachments
Filter not fullscreen after making windowheight larger (138.73 KB, image/png)
2023-03-13 09:54 PDT, veerkampmenno 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2023-03-13 11:03:38 PDT
<rdar://problem/106651996>
Alexey Proskuryakov
Comment 2 2023-03-13 16:48:40 PDT
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?
veerkampmenno
Comment 3 2023-03-14 02:45:56 PDT
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.
veerkampmenno
Comment 4 2023-03-14 02:48:38 PDT
(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.
Ahmad Saleem
Comment 5 2023-03-17 18:43:16 PDT
(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.
veerkampmenno
Comment 6 2023-03-24 06:19:03 PDT
Adding a filter: blur(0) on the element that has the backdrop filter will fix the issue.
Note You need to log in before you can comment on or make changes to this bug.