CSS Filter caues thin line during transition around element
Reported by
thejared...@gmail.com,
Jul 2 2017
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.104 Safari/537.36 Steps to reproduce the problem: 1. Add a CSS filter with sepia and blur to an element (other combos may also work) 2. apply a css animation or hover transition 3. hover over the element and see a thin line around it's edge What is the expected behavior? no line What went wrong? Line shows up. the line is the same size at all zoom levels, but on a few of them it isn't visible. Did this work before? No Does this work in other browsers? Yes Chrome version: 59.0.3071.104 Channel: n/a OS Version: 6.1 (Windows 7, Windows Server 2008 R2) Flash Version: tested in FF and worked fine.
,
Jul 6 2017
senorblanco: could you take a look?
,
Jan 10 2018
Bisect sez: You are probably looking for a change made after 440528 (known good), but no later than 440531 (first known bad). CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/693b76e2b6c18a668f14df50316548214e316663..7c176719b12185d6ddbf531d825884dfb457e755 Which pretty much has to be https://chromium.googlesource.com/chromium/src/+/d52ae8cb7575fab9f7904475299e872e6c013570
,
Jan 10 2018
Here's a bit smaller repro: http://jsbin.com/cuwofihaco/1/edit?html,output Doesn't need hover or animation; just will-change transform to trigger composited layer. Note that you do need to mess with the page zoom. I'm speculating wildly that this has something to do with recomputing layer sizes on page zoom change.
,
Jan 10 2018
There seems to be something "sticky" about the problem: the above repro only works in a window which has had the problem before; starting a new one doesn't have the problem. Here's a better repro that works consistently (page zoom down once): http://jsbin.com/tusunimomi/edit?html,output
,
Jan 10 2018
Note: the above repro uses only sepia and grayscale, not blur (because the blur implementation is more complex and I wanted to keep things simple for myself). Interestingly, the bug goes away if you remove either the sepia or the grayscale. It only repros with both.
,
Jan 17 2018
The original source of this came from the first image on this page: http://thejaredwilcurt.com It seems to have a different weird bug every month. Right now only the bottom ~20% of the image shows up, but if you hover over it, the whole image shows up momentarily during the animation transition, then at the end of it the top portion of the image is gone again. And of course, the weird boxed pixels.
,
Sep 17
As far as I understand currently, this bug does not have anything to do with animations; they were simply the trigger for the element to become composited. As such, removing Internals>Compositing>Animation; please re-add if I was mistaken. |
||||
►
Sign in to add a comment |
||||
Comment 1 by kochi@chromium.org
, Jul 3 2017Components: Internals>Skia Internals>Compositing>Animation
Status: Untriaged (was: Unconfirmed)