| Summary: | input::placeholder with opacity is pushed above backdrop-filter | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Erik Bročko <erik+webkit> |
| Component: | Compositing | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | karlcow, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | Safari 16 | ||
| Hardware: | PC | ||
| OS: | All | ||
| Attachments: | |||
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
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. |
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.