New issue
Advanced search Search tips

Issue 714247 link

Starred by 1 user
Status: Available
Owner: ----
Cc:
vmp...@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Chrome , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Element with overflow:auto under border-radius and overflow:hidden does clip content when height is 100%

Reported by jluras...@gmail.com, Apr 21 2017 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

Example URL:
https://jsfiddle.net/ry5da8tm/1/

Steps to reproduce the problem:
Take a look at: https://jsfiddle.net/ry5da8tm/1/

or create the following div:

<div style="border: solid 1px #000;border-radius: 3px;width: 100px;height: 100px;overflow: hidden;">
   <div style="overflow: hidden;height: 100px;width: 100px;">
      <div style="overflow: auto;width: 100%;height: 100%;background-color: #FFF;/* height: 1000px; */">
         <div style="height: 1000px;">
         </div>
      </div>
   </div>
</div>

What is the expected behavior?
The border should render correctly.

What went wrong?
The corners of the border are being clipped incorrectly.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 57.0.2987.133  Channel: stable
OS Version: OS X 10.11.6
Flash Version: Shockwave Flash 25.0 r0

This behavior is not consistent with other browsers. Changing the height to 1000px (instead of 100%) also seems to fix this.

Comment 1 by kojii@chromium.org, Apr 24 2017

Labels: Needs-Feedback
Could you please explain what inconsistencies you're seeing?

I don't seem to find inconsistencies between Firefox, Safari, and Chrome in the attached screenshot.
crbug-714247.png
22.7 KB View Download

Comment 2 by kojii@chromium.org, Apr 24 2017

Labels: -Needs-Feedback
Oh, wait, I think I understood it now. Missed what's said in "the expected behavior".

Comment 3 by kojii@chromium.org, Apr 24 2017

Components: -Blink Blink>Paint
Status: Untriaged (was: Unconfirmed)
Blink paints the white background of the inner div after the border of the outer div, or use the clip of inner div to draw the border of the outer div, and thus the corner is overwritten.

Only on Mac, I can't confirm on Win.

Comment 4 by ranjitkan@chromium.org, Apr 24 2017

Labels: Needs-Milestone

Comment 5 by schenney@chromium.org, Apr 24 2017

Labels: -Needs-Milestone BugSource-User PaintTeamTriaged-20170424 OS-Android OS-Chrome OS-Linux OS-Windows
Status: Available (was: Untriaged)
This is a HighDPI issue. It does not reproduce at 100% DPI setting, but does repro on Mac at 200% and on Windows at various HighDPI display settings.

Somehow the border radius painting and the outside border clip rect are not growing at the same rate as DPI increases.

Comment 6 by jluras...@gmail.com, Apr 24 2017 

I do have a display with HighDPI; however, this seems to repro for me at 100% as well. See the attached zoomed-in screenshot taken at 100% from Chrome:
Screen Shot 2017-04-24 at 9.16.53 AM.png
8.4 KB View Download

Comment 7 by schenney@chromium.org, Apr 24 2017 

Right, I saw that too, but it was less obvious to me there whether it was just standard anti-aliasing. I do think it should be improved, but without the continued degradation at HighDPI we wouldn't consider it so important.
Project Member

Comment 8 by sheriffbot@chromium.org, Apr 25 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.

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

Comment 9 by schenney@chromium.org, Apr 25 2018

Status: Available (was: Untriaged)
►

Sign in to add a comment