Bug 213220

Summary: Background-clip + background-image are buggy applied on long inline element
Product: WebKit Reporter: Luc Poupard <account>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: alexandr.zawgorodniy, kyle.bavender, mmaxfield, sabouhallawa, simon.fraser, stephen, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 13   
Hardware: iPhone / iPad   
OS: iOS 13   
URL: https://codepen.io/kloh/pen/RwrGprV
Attachments:
Description Flags
Demo on Codepen
none
Screenshot of bug (CodePen example)
none
Preview of the bug: background-clip vs text none

Luc Poupard
Reported 2020-06-15 15:08:17 PDT
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.
Attachments
Demo on Codepen (35 bytes, text/plain)
2020-06-15 15:08 PDT, Luc Poupard 		no flags
Details
Screenshot of bug (CodePen example) (120.61 KB, image/jpeg)
2020-06-15 22:20 PDT, Luc Poupard 		no flags
Details
Preview of the bug: background-clip vs text (52.95 KB, image/jpeg)
2020-06-15 22:23 PDT, Luc Poupard 		no flags
Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2020-06-15 15:54:18 PDT
<rdar://problem/64382612>
Luc Poupard
Comment 2 2020-06-15 22:20:18 PDT
Created attachment 401982 [details] Screenshot of bug (CodePen example)
Luc Poupard
Comment 3 2020-06-15 22:23:53 PDT
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)
Luc Poupard
Comment 4 2020-07-10 23:33:14 PDT
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.
Stephen Nixon
Comment 5 2021-01-29 09:06:39 PST
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
Simon Fraser (smfr)
Comment 6 2022-03-30 23:08:42 PDT
I believe this bug is fixed in iOS 15.4
Note You need to log in before you can comment on or make changes to this bug.