Created attachment 401946 [details] Demo on Codepen Hello, I was trying to make some links fancy with a linear-gradient applied on text thanks to background-clip:text and color:transparent. It fits well until the link become too long so it returns to the next line. When the case happens, text is like cropped in a weird way. I made a codepen to demonstrate: https://codepen.io/kloh/pen/RwrGprV Tested on an iPhone 11.
<rdar://problem/64382612>
Created attachment 401982 [details] Screenshot of bug (CodePen example)
Created attachment 401983 [details] Preview of the bug: background-clip vs text As text is cropped, I made an example where we can see the background-clipped tex is shifted compared to real text (with opacity)
I've updated the title because I just realized that classic background-image gradient (with image file) is also broken. I've updated the linked codepen in my first message.
I am running into the same problem in text on my blog. This works perfectly in Chromium, but seems to fail in WebKit. It would be a really nice thing to be able to do inline gradients in running, wrapped text! https://github.com/arrowtype/blog/issues/21
I believe this bug is fixed in iOS 15.4