Bug 213220

Summary:

Background-clip + background-image are buggy applied on long inline element

Product:

WebKit

Reporter:

Luc Poupard <account>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

alexandr.zawgorodniy, kyle.bavender, mmaxfield, sabouhallawa, simon.fraser, stephen, webkit-bug-importer, zalan

Priority:

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

Description Luc Poupard 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.

Comment 1 Radar WebKit Bug Importer 2020-06-15 15:54:18 PDT

<rdar://problem/64382612>

Comment 2 Luc Poupard 2020-06-15 22:20:18 PDT

Created attachment 401982 [details]
Screenshot of bug (CodePen example)

Comment 3 Luc Poupard 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)

Comment 4 Luc Poupard 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.

Comment 5 Stephen Nixon 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

Comment 6 Simon Fraser (smfr) 2022-03-30 23:08:42 PDT

I believe this bug is fixed in iOS 15.4