Bug 254762

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:

Keywords:

BrowserCompat, InRadar

Version:

Safari 16

Hardware:

OS:

All

Attachments:

Description	Flags
backdrop-filter and input::placeholder test case	none
rendered correctly in Firefox 110 - 112.0b8	none
text pushed above the overlay in Webkit	none
rendering in safari, firefox, chrome	none
Test not using backdrop-filter	none

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.