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)

defect

Tracking

()

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.
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
Assignee: nobody → cku
Flags: needinfo?(cku)
Status: NEW → ASSIGNED
Priority: -- → P3
Assignee: cku → nobody
Status: ASSIGNED → NEW
Attached file Testcase 01 (Interactive, Ghost dashed borders) (obsolete) (deleted) —
  • 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

(Prefixes for WK/Blink in testcase)

Attachment #9237240 - Attachment is obsolete: true
Attachment #9237243 - Attachment mime type: text/plain → text/html

(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."

Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: