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.
Created attachment 465687 [details] rendered correctly in Firefox 110 - 112.0b8
Created attachment 465688 [details] text pushed above the overlay in Webkit
Created attachment 465737 [details] rendering in safari, firefox, chrome latest versions of stp, nightly and canary
<rdar://problem/107722224>
Created attachment 466051 [details] Test not using backdrop-filter
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.