New issue
Advanced search Search tips

Issue 727865 link

Starred by 1 user

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Chrome , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Clip-path bug with <100% being clipped to 100% with transformed children

Reported by zachsauc...@gmail.com, May 30 2017

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

Steps to reproduce the problem:
1. Apply the clip-path property to an element, e.g. a polygon shape via clip-path
2. Apply a transform to a child element place outside of the element's bounds but within the clip-path.
3. The part of the child element outside of the element's bounds (but within the clip-path) is cut off at 100%.

What is the expected behavior?
The entire child should show since it's within the bounds of the clip-path.

What went wrong?
The parent element clips the child element at its bounds.

Did this work before? No 

Chrome version: 58.0.3029.110  Channel: stable
OS Version: 10.0
Flash Version: 

Example URL: https://jsfiddle.net/aeyf79ge/

There's also a 2px shift of the child element, 1 px to the left and 1px down, but that is only related, not the issue I'm reporting in this issue.
 
Components: -Blink Blink>Paint
Not sure what clip path is, maybe paint?
Cc: mmanchala@chromium.org
Labels: Needs-Feedback
zachsaucier@: Attaching screencast of M-35 and stable behavior 58.0.3029.110. If possible could you please provide Actual and Expected  screencast for better understanding the issue.

Thanks.
M-35.mp4
3.2 MB View Download
M-58 stable_727865.ogv
310 KB View Download
The actual behavior is the same behavior as shown in the M-58 stable screencast. The expected is the same behavior as shown in the M-35 video. 
Project Member

Comment 4 by sheriffbot@chromium.org, May 31 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "mmanchala@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Components: -Blink>Paint Blink>Compositing
Labels: OS-Android OS-Chrome OS-Linux OS-Mac
Owner: schenney@chromium.org
Status: Assigned (was: Unconfirmed)
The compositing causes the clip path to be applied incorrectly, maybe because the layer is sized incorrectly rather than the clip path being in the wrong place, although both are possible.

I'll bisect and try to see when this started.
Any updates on this? A project I have is on hold until this is resolved.
The clip is not due to the clip-path, rather the parent layer is clipping the child layer when the child is composited, even though it shouldn't because it's a positioned element that should escape overflow clips.

This might be fixable or might be very hard to fix. adding will-change: transform to the outer div might work around the issue.


Adding will-change: transform to the outer div did not work around the issue.
Thanks for the info. Like I said, I'll try to bisect and narrow down the cause, although I suspect it will be an old change.
Cc: schenney@chromium.org
Owner: ----
Status: Available (was: Assigned)
Interestingly we match Firefox. Not sure if spec has changed.

Sign in to add a comment