Bug 245480 – Incorrect rendering with background-clip:text and a relpos inline child

• Status: NEW
• Component: Layout and Rendering

[Raul]

Created attachment 462505 [details]
pic of the issue

My website has 2 home menues on top on the orginal see www.ayviza.com, only happen on safari, Version 16.0 (17614.1.25.9.10, 17614) no chrome neither firefox, please help.

[Ahmad Saleem]

I am able to reproduce this bug in Safari 16 and Safari Technology Preview 154 similar to attached reference screenshot and other browsers (Chrome Canary 108 and Firefox Nightly 107) does not have this issue. Thanks!

[Raul]

So what’s next? How to fix this issue?

[alan]

Created attachment 462522 [details]
Test reduction

[Raul]

Sorry I’m not a developer how to fix this again? The website is on Wordpress 6,0 do I need to to something? Add or remove and where? Sorry totally new to this?

[Alexey Proskuryakov]

> Test reduction

This reduction looks differently in Safari, Chrome and Firefox. But the website is only broken in Safari.

[alan]

(In reply to Alexey Proskuryakov from comment #5)
> > Test reduction
> 
> This reduction looks differently in Safari, Chrome and Firefox. But the
> website is only broken in Safari.
Correct. Adding the -webkit prefix to background-clip (-webkit-background-clip: text) makes the test case consistent with what we see on the web page.

[Raul]

Ok, can you show me how to add this on wordpress or safari not sure how to follow this i'm not a developer? Thanks

[Karl Dubost]

Created attachment 462674 [details]
rendering in safari, firefox, chrome

ok it took me a bit of time to reduce.
And the behavior is different on the 3 browsers.
This is working only with inline elements, not box elements. 


clipped green text on Safari
transparent on Firefox
Green square on Chrome

https://codepen.io/webcompat/pen/PoeQPbB

[Karl Dubost]

For Raul, 

Just remove these two properties in between 
    position: relative;
    top: 10px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

from 

.bold-text1 {
    padding-left: 0px;
    background-color: #18143b;
    font-family: Poppins, sans-serif;
    color: #18143b;
    font-size: 15px;
    line-height: 25px;
    font-weight: 500;
}


 in https://ayviza.com/wp-content/themes/ayviza-1/assets/css/ayviza.webflow.css?ver=1662677910

And if you do not understand what that means, here is not exactly the right place, but you should ask to the person who created the website for you.

[Karl Dubost]

Just noticed zalan test reduction. It exhibits the same issues in the 3 browsers.

[Karl Dubost]

The implementations in both Firefox and Chrome have a couple of issues

Series of issues on Firefox
https://bugzilla.mozilla.org/show_bug.cgi?id=1656784

In chrome, background-clip: text is not yet supported.
https://bugs.chromium.org/p/chromium/issues/detail?id=1339290


Adding -webkit-background-clip: text

makes Firefox and Chrome behaving the same and Safari the outlier.

[Radar WebKit Bug Importer]

<rdar://problem/100509488>