Open
Bug 1368174
Opened 7 years ago
Updated 2 years ago
background-clip: text clips to all foreground, including borders
Categories
(Core :: Layout, defect, P3)
Core
Layout
Tracking
()
NEW
People
(Reporter: eric, Unassigned)
References
(Blocks 1 open bug)
Details
Attachments
(3 files, 1 obsolete file)
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:55.0) Gecko/20100101 Firefox/55.0
Build ID: 20170523030206
Steps to reproduce:
1. Defined a background and visible border on an element.
2. Applied 'background-clip: text' to the element.
3. Applied 'color: transparent' to the element.
See http://meyerweb.com/eric/css/tests/firefox/background-clip-text-borders.html for a testcase using a repeating gradient background to make the problem more clear.
Actual results:
The background was blended with the borders in addition to the element text, making them visible if their color is 'transparent' and blending them with the background if their color is semi-opaque.
Expected results:
The background should be clipped to only the text, not the entire foreground. See https://drafts.csswg.org/css-backgrounds-4/#background-clip for the definition of 'text'.
Accordingly, when clipping the background to the text, the borders should not blend with the background of the element, but with the backdrop of the element.
Chrome does the expected thing, albeit with '-webkit-background-clip' instead of unprefixed 'background-clip', which Chrome apparently has yet to support. See above testcase, which uses both 'webkit-background-clip' and 'background-clip' for ease of comparison.
Comment 1•7 years ago
|
||
CJ, looks like you worked on background-clip:text -- perhaps you can take this?
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout
Depends on: 759568
Ever confirmed: true
Flags: needinfo?(cku)
Product: Firefox → Core
Version: 55 Branch → Trunk
Updated•7 years ago
|
Status: NEW → ASSIGNED
Priority: -- → P3
Comment 2•3 years ago
|
||
- This bug currently exhibits itself at MDN background-clip page's [1] interactive example [2]
- On top of strangeness of background-image shown under transparent dashed borders those "ghost text" borders sometimes do not match the "real" border dashes, as if they wrapped box with slightly different dimensions.
Attaching minimalistic interactive testcase.
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
[2] https://interactive-examples.mdn.mozilla.net/pages/css/background-clip.html
Comment 3•3 years ago
|
||
Comment 4•3 years ago
|
||
(Prefixes for WK/Blink in testcase)
Attachment #9237240 -
Attachment is obsolete: true
Updated•3 years ago
|
Attachment #9237243 -
Attachment mime type: text/plain → text/html
Comment 5•3 years ago
|
||
Comment 6•3 years ago
|
||
(In reply to Michal Čaplygin [:myf] from comment #2)
Created attachment 9237240 [details]
Testcase 01 (Interactive, Ghost dashed borders)
- This bug currently exhibits itself at MDN background-clip page's [1] interactive example [2]
- On top of strangeness of background-image shown under transparent dashed borders those "ghost text" borders sometimes do not match the "real" border dashes, as if they wrapped box with slightly different dimensions.
Attaching minimalistic interactive testcase.
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
[2] https://interactive-examples.mdn.mozilla.net/pages/css/background-clip.html
The same problem of ghost borders occurs with dotted
as well as dashed
. Ghost dots are visible on MDN [1] in the example with text "The background is clipped to the foreground text."
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•