Animated clip-path not clipping pseudo-element correctly
Reported by
cal...@samknows.com,
Feb 6 2017
|
|||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36 Steps to reproduce the problem: 1. View jsbin: https://jsbin.com/heqopilapi/edit?js,output What is the expected behavior? The line should increase width until it is about 300px high, and then immediately go back to 0px high and start over. To see what it should look like, uncomment the commented out line: this was intended to demonstrate where the line should be, but for some reason also fixes the problem. What went wrong? It stopped much before 300px. If you change the width of the browser, you sometimes get artifacts (see screenshot). Other people have reported that it's very flickery for them. Did this work before? N/A Does this work in other browsers? No It's happening in Safari and Opera, too. clip-path not supported in other browsers. Chrome version: 55.0.2883.95 Channel: n/a OS Version: OS X 10.11.5 Flash Version: Shockwave Flash 24.0 r0
,
Feb 9 2017
This appears to be an invalidation problem because we are not repainting anything around the psuedo element. There are also artifacts when the <hr> is animated and sometimes the border draws below the <hr>, when it should always be above. Or maybe I'm misunderstanding how we handle invalidation around the clip. Clearly when the <hr> becomes composited the situation improves, but we are still only repainting the header text and the <hr>, according to DevTools. And note this is not CSS animation. It's a RAF setting the clip rect. wangxianzhu@, can you help out by explaining what should happen?
,
Feb 9 2017
What does Needs-Milestone mean?
,
Feb 9 2017
Needs-Milestone means it would be good to attach an M<number> label to indicate under which Chrome version this issue is tracked.
,
Mar 14 2017
Here's another jsbin with the bug with clip-path on an animated element. This time, the clip-path isn't changed, the height of the element is. https://jsbin.com/vifigiriko/edit?css,js,output
,
Mar 27 2017
Tested this issue on Mac 10.12.3 with chrome #55.0.2883.95 & #57.0.2987.110 with provided url in comment #0 Observed that line is increasing up to 300px and then going back to 0px and increasing again and while resizing the windows artifacts are also observed. Note: ----- In <M54 builds, issue is seen where line is increase width up to 300px high, and then not reverted back to 0px Attaching the screen-cast for reference. callum@ could you look into it and let us know your observations.
,
Apr 6 2018
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 9 2018
This seems to be working as intended now. |
|||||
►
Sign in to add a comment |
|||||
Comment 1 by nyerramilli@chromium.org
, Feb 7 2017