NEW 254762
input::placeholder with opacity is pushed above backdrop-filter 
https://bugs.webkit.org/show_bug.cgi?id=254762
Summary input::placeholder with opacity is pushed above backdrop-filter
Erik Bročko
Reported 2023-03-30 12:36:00 PDT
Created attachment 465686 [details] backdrop-filter and input::placeholder test case Having an <input type="text" placeholder="blahblah"> with the placeholder text set to opacity lower than 1.0 makes it render higher than the overlaying element with backdrop-filter applied. Any backdrop-filter value triggers this behaviour -- blur, hue-rotate, grayscale, contrast... Setting z-index to the overlay element fixes the issue. Chrome 113 and Safari 16 fail, Firefox renders it correctly.
Attachments
backdrop-filter and input::placeholder test case (2.19 KB, text/html)
2023-03-30 12:36 PDT, Erik Bročko 		no flags
Details
rendered correctly in Firefox 110 - 112.0b8 (47.38 KB, image/png)
2023-03-30 12:39 PDT, Erik Bročko 		no flags
Details
text pushed above the overlay in Webkit (47.74 KB, image/png)
2023-03-30 12:39 PDT, Erik Bročko 		no flags
Details
rendering in safari, firefox, chrome (490.06 KB, image/png)
2023-04-02 17:46 PDT, Karl Dubost 		no flags
Details
Test not using backdrop-filter (1.14 KB, text/html)
2023-04-23 10:18 PDT, Simon Fraser (smfr) 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Erik Bročko
Comment 1 2023-03-30 12:39:08 PDT
Created attachment 465687 [details] rendered correctly in Firefox 110 - 112.0b8
Erik Bročko
Comment 2 2023-03-30 12:39:42 PDT
Created attachment 465688 [details] text pushed above the overlay in Webkit
Karl Dubost
Comment 3 2023-04-02 17:46:23 PDT
Created attachment 465737 [details] rendering in safari, firefox, chrome latest versions of stp, nightly and canary
Radar WebKit Bug Importer
Comment 4 2023-04-06 12:36:16 PDT
<rdar://problem/107722224>
Simon Fraser (smfr)
Comment 5 2023-04-23 10:18:15 PDT
Created attachment 466051 [details] Test not using backdrop-filter
Simon Fraser (smfr)
Comment 6 2023-04-23 10:21:01 PDT
backdrop-filter isn't necessary to reproduce this. This happens in WebKit because the opacity creates a "self-painting" layer that gets z-sorted above `overlay` because it comes later in the DOM.
Note You need to log in before you can comment on or make changes to this bug.