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

Issue 827870 link

Starred by 3 users

Issue metadata

Status: Duplicate
Merged: issue 678669
Owner:
Closed: May 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 1
Type: Bug-Regression



Sign in to add a comment

Div with position:fixed gets clipped by parent div when parent has border-radius and opacity

Reported by helosp...@gmail.com, Apr 1 2018

Issue description

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

Steps to reproduce the problem:
1. Open https://jsfiddle.net/helospark/wku5ckpz/10/ (or attached test.html) in Chrome
2. Scroll around, so that blue div is overlapping red div

What is the expected behavior?
Blue div with "position:fixed" should not be clipped, because it should be positioned relative to browser's layout.
As per: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Fixed_positioning element is positioned relative to browser's layout, therefore parent div should affect the clipping.

What went wrong?
Blue div gets clipped to the area of the parent div.

If I remove either "border-radius" or "opacity" or "overflow:hidden" Chrome renders expected result (blue rectangle not clipped). Also when setting border-radius:0px or opacity:1.0 also the correct result is shown.

Did this work before? Yes Not sure of the latest, works in Chrome 50

Does this work in other browsers? Yes

Chrome version: 65.0.3325.181  Channel: stable
OS Version: 4.13.0-37-generic
Flash Version: 

I can reproduce it on Windows, Linux and Mac.
Works as expected in:
 - Firefox
 - IE

Fails in:
 - Chrome
 - Safari (in slightly different way)
 
test.html
1.1 KB View Download
Labels: Needs-Bisect Needs-Triage-M65
Cc: sindhu.chelamcherla@chromium.org
Labels: -Pri-2 -Needs-Bisect hasbisect-per-revision FoundIn-66 Triaged-ET RegressedIn-64 Target-66 M-67 Target-67 FoundIn-67 Target-65 FoundIn-65 OS-Mac OS-Windows Pri-1
Owner: sunxd@chromium.org
Status: Assigned (was: Unconfirmed)
Able to reproduce the issue on reported version 65.0.3325.181, on latest beta# 66.0.3359.66 and on latest canary 67.0.3386.0 using Windows 10, Ubuntu 14.04 & Mac 10.13.3.

Bisect Info:
=============
Good Build: 64.0.3249.0
Bad Build: 64.0.3250.0

You are probably looking for a change made after 511578 (known good), but no later than 511579 (first known bad).
CHANGELOG URL:
  https://chromium.googlesource.com/chromium/src/+log/8c7e87211aa02c337795f9260705c47d8a277e5b..eeaf4c2326de12c9b36324a805e46ab933057e54

Reviewed-on: https://chromium-review.googlesource.com/735751

@ sunxd: Please confirm the bug and help in re-assigning if it is not related to your change.

Thanks!
Components: -Blink>Layout Blink>Paint

Comment 4 by sunxd@chromium.org, May 22 2018

Cc: flackr@chromium.org smcgruer@chromium.org enne@chromium.org
I think it's because the fixed-pos layer contributes to the render surface, and the render surface happens to be clipped by masks (instead of applying clip through clip tree), so the fixed pos layer did not bypass mask clips.

We might want to not tile mask layer when render surface has a fixed-pos child.
Is the clip parent of the fixed-position cc::Layer being set correctly?

Comment 6 by sunxd@chromium.org, May 22 2018

I think the clip parent is correct:
"LayoutBlockFlow (positioned) DIV class='child'" gets clip parent "LayoutView #document".
That looks correct.

What is different about mask tiling though? why did tiling make it fail?

Comment 8 by sunxd@chromium.org, May 23 2018

If I remove opacity:0.99, it can be rendered correctly. I doubt we have the wrong content rect here, and mask tiling uses it to intersect the draw quads mask layer produces, but I need further investigate.
Note: opacity is not required, just a stacking context. Replacing it by
"isolation: isolate" also demonstrates the issue. I think the purpose of the stacking context in the repro is to make the fixed-position layer a "descendant" of the other one.

Comment 10 by sunxd@chromium.org, May 25 2018

Cc: trchen@chromium.org
It looks like the fixed pos element changed the content rect of the render surface (from rect(145, 0, 801, 600) to rect(145, -200, 801, 800), but mask layer's bounds is not changed. We ended up producing mask layer quads that cover rect(145, 0, 801, 800) and missed the top part of the fixed pos element.

I hacked the code by adding a solid color quad (145, -200, 801, 200), the fixed pos element can be rendered correctly with that.
This belongs to the general bug that "composited border radius clip cannot be escaped because it is implemented as a mask". So it is not limited to fixed-pos, anything makes a composited border radius clip could be affected. For example: http://jsbin.com/pesicoguqo/

There was a separate bug with non-tiled mask layer code that when the source render surface is bigger than its mask, the mask's last column/row of pixels will be extended all the way to infinite (i.e. it is sampled using GL_CLAMP_TO_EDGE, without a transparent border.). The tiled mask is not subject to that bug. If you change the example so that the clip-escaping element extends beyond one of the rounded corder, you'll see that everything beyond that corner will be inadvertently clipped even without sunxd@'s patch.

This is a long-standing bug since we ever implemented composited border radius clip. I think it is very difficult to fix with our current compositing architecture. But fear not! Solving this issue is one of the explicit goal of SPv1875 ugh, I mean, BlinkGenPropertyTrees. The example should already render correctly with --enable-blink-gen-property-trees. If everything went as hoped, we will be shipping it next quarter.

Comment 12 by sunxd@chromium.org, May 25 2018

Hi trchen@, do you think it's okay that we merge this bug into the general one and let blink-gen-property-trees fix it?
Mergedinto: 678669
Status: Duplicate (was: Assigned)

Sign in to add a comment