Simple Sites Don't Allow -webkit-text-fill-color

[bobmatyas]

Quick summary

CSS Tidy strips out -webkit-text-fill-color on simple sites.

Steps to reproduce

Add custom CSS to a simple, i.e.:

.site-title a {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

What you expected to happen

Text gradient should display:

What actually happened

The text gradient works in Custom CSS:

Browser

Mozilla Firefox

Context

It looks like outside of Internet Explorer, there is wide support for this according to CanIUse.com. MDN warns against using it on production sites, but with wide support, it may be worth allowing. It works on Atomic sites.

Platform (Simple, Atomic, or both?)

Simple

Other notes

No response

Reproducibility

Consistent

Severity

No response

Available workarounds?

No but the platform is still usable

Workaround details

Upgrade to Atomic where this CSS property works.

[Robertght]

I'm adding this to @Automattic/cylon 's board as other CSS Tidy related reports are there. cc @Addison-Stavlo

[Addison-Stavlo]

I'm adding this to https://github.com/orgs/Automattic/teams/cylon 's board as other CSS Tidy related reports are there.

@Robertght sounds good! Note that Im not sure how we ended up with CSS Tidy reports and issues and we haven't had any work related to it previously. That said, we can add this on the backlog and get to it when we can. However if there is more urgency with these CSS Tidy issues feel free to assign elsewhere instead.

[simison]

@Addison-Stavlo @Robertght CSSTidy is being entirely removed by @fullofcaffeine. See D70703-code or p1662067041679139-slack-gutenberg-on-dotcom

[Addison-Stavlo]

CSSTidy is being entirely removed by @fullofcaffeine.

Fantastic! Any ETA for this @fullofcaffeine ?

[Addison-Stavlo]

Testing around this again, it seems to still be an issue. However, other CSSTidy related issues such as https://github.com/Automattic/wp-calypso/issues/60741 seem to work well now.

But for -webkit-text-fill-color this property still gets removed after saving custom CSS and reloading the custom css editor.

Given this issue has not had any bumps in months or since it was created, il remove it from our board since we won't be able to prioritize it anytime soon.

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple: Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• Replicated as described - -webkit-text-fill-color is supported on AT sites, but not Simple.

Simple Example

AT Example

📌 ACTIONS

• Assigned to Non-Urgent