Open Bug 1908386 Opened 2 years ago Updated 2 years ago

text-shadow on top of text with background-clip: text;

Categories

(Core :: Web Painting, defect)

Product:
Core
Component:
Web Painting
Version:
Firefox 128
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: jsnkuhn, Unassigned)

References

(Blocks 1 open bug)

Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0

Steps to reproduce:

https://codepen.io/jsnkuhn/pen/eYwJzrL?editors=1100

Gradient text with a text-shadow:
color: transparent;
background-image: linear-gradient(red, blue);
background-clip: text;
text-shadow: 2px 2px #000;

Actual results:

text-shadow paints on top of text styled with background-clip: text;

Expected results:

Expected the text-shadow to paint behind the text.

I guess even if the shadow paints beneath the gradient text this could still be an issues with transarent colors in the gradient.

Intended result can be achieved with filter: drop-shadow();.
This is included in the above Codepen.

Component: Untriaged → Web Painting
Product: Firefox → Core

The severity field is not set for this bug.
:tnikkel, could you have a look please?

For more information, please visit BugBot documentation.

Flags: needinfo?(tnikkel)
Severity: -- → S3
Flags: needinfo?(tnikkel)
You need to log in before you can comment on or make changes to this bug.