KPC
Kevin Powell - Community•2y ago
~MARSMAN~

backgroun-clip text; issue on safari

Hello, I have this weird Extra Line appears on sides of texts which have a linear-gradiant using 
background-clip
background-clip
, it only appears on safari. What's causing this "glitch?" ? And how to fix it please.
7 Replies
~MARSMAN~
~MARSMAN~•2y ago
capt_uhu
capt_uhu•2y ago
stack overflow link on the issue: https://stackoverflow.com/questions/46466089/weird-artifacts-on-safari-when-using-webkit-background-clip-webkit-text-fill
Stack Overflow
Weird artifacts on Safari when using -webkit-background-clip, -webk...
So, I have this title text here: And as you can see, there's a weird line above the text with gradient. The CSS for that text is the following: color: #fff; background: -webkit-linear-gradient(1...
~MARSMAN~
~MARSMAN~•2y ago
I've tried them and nothing so far does help getting rid off of it 😐 after adding 
background-repeat: no-repeat;
background-origin: content-box; 
background-repeat: no-repeat;
background-origin: content-box;
at first it's normal till you scroll up it appears again O_o
capt_uhu
capt_uhu•2y ago
am on windows so can't test but this really just sound like a browser bug so best to just work around it. Maybe try clip-path: inset() to chop off the artifact?
~MARSMAN~
~MARSMAN~•2y ago
i guess it fixed it! but not alone i had to combine it with background-repeat and content-box 
background-repeat: no-repeat;
background-origin: content-box;
clip-path: inset(2px); 
background-repeat: no-repeat;
background-origin: content-box;
clip-path: inset(2px);
i set it to this and it's better now thanks!
capt_uhu
capt_uhu•2y ago
fyi, if all you want to do is clip off the right side maybe go with clip-path: inset(0 2px 0 0); Other, unrelated thing, I guess but you don't need all the prefix versions of the linear-gradient in there. Haven't need that for a long time
~MARSMAN~
~MARSMAN~•2y ago
That's not the only text, i have a bunch of other texts using linear-gradiant and each one of them got that glitch appears from a different side lol
Want results from more Discord servers?
Add your server
More Posts
How do I make shapes in css? (Like the img attached)I want to have a css grid container which has a shape like this, how do I achieve something like thiNeed help with opening and reading a 122 GB JSON fileDose anyone know a website or app or anything to open a json file and also read it without it crashiProblem with addeventlistenerCould someone explain why this is making the function run before any button has been pressed? ShouldShorthand way to achieve this grid?Hello 👋 I'm trying to make a grid that alternates in items per row between 4 and 5 items. Is theHow do I target input tag herehttps://codepen.io/aldrinbright/pen/abGjLOWMake a box shadow stop halfwayHi, I'd like to create this effect with the images at the top. As you can see the box shadow stops aCss grid polyfillGuys! i need your help, recently a was hired as junior web dev, and in my company we work at rewritiGap below image in CSS GridHow do I avoid the gap below the image. I'm using max-width:100% display: block; If this informatDecorative image that adapts to the screen size?Hi there. I'm working on a design where the hero image has a decorative element that should span thehow to use a loop to cap the last letter of a stringlet x = "hello my name is chrono" let reg = x.split(' ') for(let i = 0; i < reg.length; i++) {