Problems with webkit-linear-gradient and webkit-background-clip
Reported by
shen...@gmail.com,
Dec 1 2016
|
||||||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36
Steps to reproduce the problem:
<html>
<head>
<style>
.outer {
background: -webkit-linear-gradient(left, #FFF, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: 600px;
font-size: 32px;
margin: 20px;
border: 1px solid #CCC;
padding: 20px;
}
</style>
</head>
<body>
<div class="outer">
<div>
<div>
<div id="coolText">Select me!!!</div>
</div>
</div>
</div>
<script>
var elem = document.getElementById('coolText');
setInterval(function ()
{
elem.innerText = (new Date()).toISOString();
}, 100);
</script>
</body>
</html>
What is the expected behavior?
The browser should print a timestamp every 100ms.
What went wrong?
Chrome doesn't updates the view.
To get it updated you have to select the text.
Did this work before? N/A
Chrome version: 54.0.2840.99 Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 23.0 r0
,
Dec 2 2016
Able to reproduce the issue on Windows 10, Ubuntu 14.04, Mac OS 10.12.1 using chrome reported version #54.0.2840.99 and latest canary #57.0.2938.0. Bisect Information: ===================== Good build: 45.0.2433.0 Revision(334505) Bad Build : 45.0.2434.0 Revision(334743) Change Log URL: https://chromium.googlesource.com/chromium/src/+log/fccacdca58722bee1497fcb7f5 cfc2780732a4e0..515644de67580234723549501fbdfa5a3c5765b2 Got 4 Blink change logs related to "webkit" from the above CL, which are as follows: Blink Change Log: 1. https://chromium.googlesource.com/chromium/blink/+log/e100452..57b3c56 2. https://chromium.googlesource.com/chromium/blink/+log/57b3c56..d913ce0 3. https://chromium.googlesource.com/chromium/blink/+log/4c0b51a..b4ab0a0 4. https://chromium.googlesource.com/chromium/blink/+log/57b3c56..d913ce0 Unable to find any suspect from the above blink CLs. Could anyone from dev team please help us in assigning it to the right owner. Thanks...!!
,
Dec 2 2016
,
Dec 2 2016
The text itself is transparent, so apparently we decide not to update and paint it (makes, sense, you can't see it). But it needs to be updated because the clip depends on it. This should be reasonably easy to special case the fix. Bugs that regressed more than 4 (or so) versions back do not count as regressions for tracking purposes.
,
Dec 2 2016
More oddly, if the text is anything other than fully opaque we fail to update the background.
,
Jan 19 2017
Issue 574797 has been merged into this issue.
,
Apr 4 2017
The test images/color-profile-background-clip-text.html fails because of this bug. Incorrect expectations are checked in.
,
Dec 5 2017
I've just run into this bug as well. Curiously, it doesn't seem to always happen. This JSFiddle shows it happening on a flex div, but not on a block div: https://jsfiddle.net/lange/7spawbzy/
,
May 19 2018
This might be a separate issue, but since r514075, setting the value of `-webkit-background-clip` via CSS Custom Properties no longer works. Here's a JSFiddle with a minimal reproduction of the issue: https://jsfiddle.net/0rxh6nox/1/ Here's the commits between the last known good build and the first known bad build: https://chromium.googlesource.com/chromium/src/+log/314714c736ac5966f73716a66c69321bc5f7fa81..37218b85984625720e0b84bc34e421d6b93254f5 This commit seems to be the most likely culprit: https://chromium.googlesource.com/chromium/src/+/82479f4915c1da488897174bef80b957f060e701
,
May 19 2018
@c#9, that does sound like a separate issue. Would you mind filing a new bug for it?
,
May 19 2018
@c#10, sure, opened a new bug here: https://bugs.chromium.org/p/chromium/issues/detail?id=844880
,
Sep 10
,
Sep 10
|
||||||
►
Sign in to add a comment |
||||||
Comment 1 by ligim...@chromium.org
, Dec 1 2016