-webkit-text-fill-color: transparent; not working in Safari 7.1.7
Solution 1
I had this same issue. Turns out it was due to the display property. For whatever reason, Safari needs the display set to "inline" or "inline-block", but not "inline-flex".
So for me this meant changing From: display: flex; To: display: inline;
Solution 2
To someone coming to this, just drop -webkit-text-fill-color: transparent;
as it's not a standard and is not on a standard track.
Use instead color: transparent
and wrap everything in an @supports
to prevent color transparent from being used in case background-clip: text
is not supported.
Here's an example: https://jsfiddle.net/0oeftdbk/5/
––
As per the 🐛 bug of the gradient not showing clipped inside the text on Safari, it looks like that if it's applied on the parent element and not directly to the children, all the children need to be display: inline
or a inherently inline element such as span
.
Peter N
Updated on June 05, 2022Comments
-
Peter N almost 2 years
I have an ul with several li.
I use this id on the ul.
#list { margin-right: auto; margin-left: auto; width:500px; color:black; background: -webkit-linear-gradient(#000, #909090); -webkit-text-fill-color: transparent; -webkit-background-clip: text; }
The contents of the ul receive a gradient treatment just fine in Chrome but not Safari. In Safari, all of the li are "invisible". If I inspect and then disable the "-webkit-text-fill-color: transparent;", the text will become visible albeit without the gradient (obviously).
Thoughts?
Here is the JSfiddle: https://jsfiddle.net/s96bzcua/
Kind regards,
-
jantimon over 4 yearsThere is a bug in the official safari bug tracker. Unfortunately it looks like nobody has looked into it for the last two years: bugs.webkit.org/show_bug.cgi?id=169125
-
-
Peter N over 8 yearsThanks. I'll give it a shot. I think you pasted my fiddle URL so if you have another example that would help a lot.
-
Marius K. over 8 years@PeterN Oh yes, you are right. jsfiddle.net/s96bzcua/1 I updated the post.
-
Peter N over 8 yearsYour example makes sense. Thank you!
-
jphogan almost 6 yearsI had to use inline-block, but this was great. Thanks! My live example is here if anyone else wants to see it in action. Without the "inline-block" declaration on the a tag, Safari would only show the first line or so and then the text was missing.
-
rmolinamir over 5 yearsAny idea why this isn't compatible with flexbox?