New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 673983 link

Starred by 3 users

Issue metadata

Status: Fixed
Owner: ----
Closed: Feb 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Inconsistent clip-path: inset(0px) Behavior on Retina Displays

Reported by alex.li...@celtra.com, Dec 14 2016

Issue description

UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

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

Steps to reproduce the problem:
1. In an empty HTML document, set the body height to something large (to enable scrolling) and the padding-top to a fixed amount (300px)
2. Add a div (#parent) with a fixed height (200px) and clip-path: inset(0px)
3. Inside #parent, add a div (#child) with fixed position, top: 0 and left: 0, give it a fixed width (200px), a fixed height (200px), and a fun background color.
4. Load the document on a retina display, or while "simulating" a retina display with the device toolbar.

What is the expected behavior?
#child should not be visible until #child is directly underneath #parent.

What went wrong?
The expected behavior occurs on non-retina displays. #child is always visible on retina displays.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? Yes 54

Does this work in other browsers? Yes

Chrome version: 55.0.2883.87  Channel: stable
OS Version: Debian stretch/sid
Flash Version: Shockwave Flash 24.0 r0

We can move Chrome on the same machine from one display (retina) to another (non-retina) and the behavior is as written, updating immediately. This is not a problem with device simulation, it just happens to also occur there.

When clip-path is set to a different value, say inset(1px)

In addition, there is further weird clipping behavior when overflow: hidden is applied to #parent. It may or may not be related since it also exclusive to retina displays. We'd be happy to make a new issue for it:

https://jsfiddle.net/gcs16jxz/

Everything reproduced on Mac with same Chrome versions.
 
* When clip-path is set to a different value, say inset(1px), the expected behavior occurs.

Comment 2 by tkent@chromium.org, Dec 14 2016

Components: -Blink Blink>Layout
Labels: M-55 Needs-Bisect prestable-55.0.2883.87

Comment 4 by e...@chromium.org, Dec 14 2016

Components: -Blink>Layout Blink>Paint
Clipping is a paint concept, over to the paint team for triage.
Cc: ranjitkan@chromium.org
Labels: -Type-Bug -Needs-Bisect Needs-triage OS-Mac Type-Bug-Regression
Status: Untriaged (was: Unconfirmed)
Able to reproduce the issue and is broken in M55, below are the bisect details for the same:

55.0.2860.0 - Good Build
55.0.2864.0 - Bad Build:

Change Log: https://chromium.googlesource.com/chromium/src/+log/55.0.2860.0..55.0.2864.0?pretty=fuller&n=10000

Unable to narrow down as all the builds invoked in between do not load any web sites, both using per revision scrip and regular bisect script. Unable to find a possible suspect from the change log as well.

Adding needs triage, so that it gets triaged properly. Untriaging it so that it gets addressed.

Comment 6 by f...@opera.com, Dec 15 2016

The test as written would not work prior to 418827. Changing clip-path to -webkit-clip-path would allow checking older builds.
Cc: bokan@chromium.org sunyunjia@chromium.org
Labels: -Needs-triage Needs-Bisect
https://chromium.googlesource.com/chromium/src/+/57da1c75484e5a3f0af03d038c43e6f23e1549e8 seems highly plausible for at least one of the issues.

Or https://chromium.googlesource.com/chromium/src/+/469bcf04ced0868049864010a367b0d56a73ffa7

But yes, also check earlier versions with the -webkit-clip-path property.

Comment 8 by bokan@chromium.org, Dec 15 2016

Cc: -bokan@chromium.org
Owner: bokan@chromium.org
Status: Assigned (was: Untriaged)
Seems likely it was me. I'll take a look.

Comment 9 by bokan@chromium.org, Dec 15 2016

Cc: bokan@chromium.org
Labels: -Needs-Bisect -Type-Bug-Regression Type-Bug
Owner: ----
Status: Untriaged (was: Assigned)
Actually, I tried this on M54 (and as far back as M52) using -webkit-clip-path as suggested in #6 and the behavior was the same so it's definitely not my patch. The behavior changed sometime in M56 where the #child div doesn't show up at all, but it's still not correct.

Has clip-path ever worked properly on high-DPI screens? It seems like we composite the layers but clip-path can't be handled properly on the compositor and needs to be repainted on scroll. I can cause clip-path to fail on Linux-dev by passing --force-device-scale-factor=2.

Unassigning so someone from paint can have a look.
Cc: schenney@chromium.org
Status: Available (was: Untriaged)
Clip path for a composited child of the clipper is known to be broken https://bugs.chromium.org/p/chromium/issues/detail?id=615870

I think we leave this as Available because we are clearly not right and I think we should see what happens when we fix 615870.
Thanks for the speedy responses!

We noticed 615870 has a fix committed, but we're still able to reproduce the issue in Canary (57.0.2971.0). Has the fix made it into the Canary builds? If not, when might we expect it to be?
We looked into the nature of the fix for 615870. As we understand, "hasClipRelatedProperty()" wasn't recognizing "clip-path" as a clipping property; This patch starts recognizing it as such, so elements with "clip-path" are correctly clipped.

I think it's safe to say the patch is unrelated to this problem. When we set "overflow: hidden" on an element, which should cause "hasClipRelatedProperty()" to return true and circumvent the bug in 615870, we still experience the issue on Retina Displays.
Something we observed that might be share-worthy: We're getting the expected behavior if we substitute "clip-path" with an equivalent "clip" property.
Project Member

Comment 14 by sheriffbot@chromium.org, Feb 16 2018

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
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. If you change it back, also remove the "Hotlist-Recharge-Cold" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Status: Fixed (was: Untriaged)
This appears to be fixed, if I am correctly understanding the expected behavior. There is no difference Retina/non-Retina and the greenish div is only visible when scrolled up.

Sign in to add a comment