New issue
Advanced search Search tips

Issue 814931 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner: ----
Closed: Feb 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Regression: Combination of border-radius and css properties changes display

Reported by he...@bythepixel.com, Feb 22 2018

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:58.0) Gecko/20100101 Firefox/58.0

Steps to reproduce the problem:
1. Open the CodePen (https://codepen.io/HeathNaylor/pen/zRLxdq)
2. See that the first div has the content held within
3. See that the second div allows the inner modal div to violate the overflow hidden attribute
4. Remove either the z-index, border-radius, or position attributes to see that it can violate the overflow attribute

What is the expected behavior?
It is hard to say what the expected behavior is. Other browsers and older versions of Chrome would allow the modal class to violate the overflow hidden property.

What went wrong?
Only way that I can get this bug to occur, is to introduce the border-radius in conjunction with the overflow hidden, z-index, and position relative.

Did this work before? Yes 

Chrome version: 66.0.3353.0  Channel: n/a
OS Version: OS X 10.12
Flash Version:
 
border-radius-issue.png
16.1 KB View Download
non-issue-in-other-and-older-browsers.png
13.5 KB View Download
Labels: Needs-Bisect Needs-Triage-M66
Cc: vamshi.kommuri@chromium.org
Labels: Triaged-ET Needs-Feedback
Thanks for filing the issue!

Checked the issue on reported chrome version 66.0.3353.0 using Mac 10.13.1. We are able to see a similar behaviour as shown in first attachment in the mentioned version. In the process of triaging the issue further we noticed another behaviour which is neither similar to first nor to that of second. Attaching the screen shot of the same. 

@Reporter: Could you please have a look at the screen shot and please mention the behaviour of the Photo attached with this comment.
814931.png
8.0 KB View Download

Comment 3 by rsesek@chromium.org, Feb 26 2018

Components: -UI Blink>CSS
Vamshi, I can't reproduce the issue you are seeing, but I do have others who have been able to verify that this issue does occur. This is possibly in conjunction with switching between tabs. I also can't edit my original post to include the behavior you are seeing so the best I can do is to verify it here. Attached is a screen shot provided to me by an individual who could replicate what you were seeing.
image (3).png
13.4 KB View Download
Project Member

Comment 5 by sheriffbot@chromium.org, Feb 26 2018

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 6 by e...@chromium.org, Feb 26 2018

Status: WontFix (was: Unconfirmed)
The second element, class overflow-hidden, does *not* have overflow hidden and as such the overlay is positioned relative to the parent and isn't clipped.

This is not a regression and per spec.
Our rendering here is identical with firefox. 
The rendering is not identical with Firefox. Firefox and Chrome render these different. This is a regression that occurred recently. I did forget the overflow hidden in the codepen, but after adding it in, the effect is the same. This still qualifies as a regression I believe and should be fixed.

Sign in to add a comment