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.
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!
So what’s next? How to fix this issue?
Created attachment 462522 [details] Test reduction
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?
> Test reduction This reduction looks differently in Safari, Chrome and Firefox. But the website is only broken in Safari.
(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.
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
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
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.
Just noticed zalan test reduction. It exhibits the same issues in the 3 browsers.
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.
<rdar://problem/100509488>