Issue metadata
Sign in to add a comment
|
clip-path distorted when subelement is translated
Reported by
lazarusa...@gmail.com,
Jul 21 2016
|
||||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 Example URL: http://codepen.io/lazarus535/pen/LkdjbQ Steps to reproduce the problem: 1. Open the codepen URL that is attached 2. Scroll down 3. See the distorted clipping area (stretches down) What is the expected behavior? Clipping area stays the same when subelement is translated. Only absolute position of subelement moves (e.g. to implement parallax effect). Works in Firefox. What went wrong? Clipping area distorts (stretches down, pls see demo URL), when only subelement should be affected. Does it occur on multiple sites: N/A Is it a problem with a plugin? No Did this work before? No Does this work in other browsers? Yes Chrome version: 51.0.2704.106 Channel: n/a OS Version: Arch Flash Version: no Flash installed Works correctly on Firefox. Also does not work on Opera (and probably Safari). Internet explorer and Edge do not support clip-path property atm, so cannot test there.
,
Jul 21 2016
Can you try this in Chrome Canary? We had a bug that arose when clips using SVG paths did not get correctly positioned when the target element was in a composited layer, as would be the case if you add a translate to it. In Chrome 52 I'm not seeing any distortion, but I am seeing the bottom of the hexagon getting clipped off as one scrolls down. Could you post a screen shot if you manage to reproduce it on Canary?
,
Jul 21 2016
I almost figured that the "clipping" was the distortion - notice how the "upper" part of the hexagon grows taller as you scroll down. (Maybe a bit subtle...) Seeing this in a recent content_shell as well. Since this clipPath uses clipPathUnits=objectBoundingBox, I don't think the fix you're thinking of is at play here. I suspect the observed difference is because FF uses the border-box as the reference box (which is per current draft spec.)
,
Jul 21 2016
Here a slightly tweaked (simplified) version with a side-by-side comparison: https://jsfiddle.net/7eyzwsdc/
,
Jul 22 2016
I tried Chrome Canary (downloaded today) on MacOSX (Yosemite): Not displayed correctly. The issue persists. And yes i also notice the bottom part being clipped off as well as the whole clipping area being stretched downwards. I get the same effect on all versions of Chrome i tested so far. Will try Chrome-dev on Arch Linux aswell in the future.
,
Jul 22 2016
Could you check the fiddle I posted in comment 4, and say if this matches the issue you're seeing?
,
Jul 22 2016
Thank you for providing more feedback. Adding requester "schenney@chromium.org" for another review and adding "Needs-Review" label for tracking. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jul 22 2016
It's an odd result. The fact that a translate seems to stretch the clip makes little sense to me.
,
Jul 22 2016
My guess would be that it's because physicalBoundingBoxIncludingReflectionAndStackingChildren is used as the reference box.
,
Jul 22 2016
I just tested on Chrome Canary (fresh download from today) on Windows 10 Enterprise x64 (latest): The issue persist on all above mentioned testcases (my codepen and the fiddle from post #4).
,
Aug 22 2016
|
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by cbiesin...@chromium.org
, Jul 21 2016