Open Bug 1368174 Opened 4 years ago Updated 9 months ago
background-clip: text clips to all foreground, including borders
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
Product: Firefox → Core
Version: 55 Branch → Trunk
You need to log in before you can comment on or make changes to this bug.