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

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 3
Type: Bug


Show other hotlists

Hotlists containing this issue:
Relevant-for-Bootstrap-4


Sign in to add a comment
link

Issue 269061: CSS columns cropping shadows/overflow, acting like 'overflow:hidden' attribute

Reported by acwrob...@gmail.com, Aug 6 2013

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36

Example URL:
http://jsfiddle.net/Slink/PUxRD/

Steps to reproduce the problem:
1. Access a web page that uses CSS columns which contain elements that use the box-shadow attribute.
2. Observe.

What is the expected behavior?
Shadows and other static graphics should be allowed to overflow horizontally in CSS columns, without being visually cropped, whether with or without the use of the CSS attribute "overflow:visible".

What went wrong?
The shadows, or any horizontally overhanging/overflowing content gets truncated/cropped when inside a parent element that has columns.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? No 

Chrome version: 28.0.1500.95 m  Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: Shockwave Flash 11.8 r800

Thanks! Chrome is my favorite browser. Firefox won this one, though!
 
box-shadow-glitch.png
13.2 KB View Download

Comment 1 by tkent@chromium.org, Aug 6 2013

Cc: tasak@chromium.org
Labels: -Cr-Content Cr-Blink-Rendering

Comment 2 by msrchandra@chromium.org, Aug 7 2013

Cc: msrchandra@chromium.org
Labels: M-30
Status: Untriaged
Able to reproduce the issue. This is a Non-Regression Issue. Can be seen from M24 builds.

Working fine in FF.

Comment 3 by kareng@google.com, Aug 19 2013

Labels: -M-30 MovedFrom-30 M-31
Moving all non essential bugs to the next Milestone.

Comment 4 by tasak@google.com, Aug 20 2013

I think, we need to change the way to render columns.

In WebCore::RenderBlock::paintColumnContents, for each column, Blink paints all children with clipping rect.

(it spends O(column-count x # of children))

So box-shadows are also clipped...

Comment 5 by bugdroid1@chromium.org, Sep 27 2013

Project Member
Labels: -M-31 MovedFrom-31
This issue has already been moved once and is lower than Priority 1,therefore removing mstone.

Comment 6 by bbenc...@gmail.com, Jul 21 2014

Still happens. :(

Comment 7 by jchaffraix@chromium.org, Aug 9 2014

Cc: msten...@opera.com

Comment 8 by jchaffraix@chromium.org, Aug 9 2014

Labels: Cr-Blink-Rendering-MultiCol

Comment 9 by msten...@opera.com, Aug 27 2014

I agree that it would look nice, but it doesn't seem that it would be in accordance with the spec to not clip shadows:
http://www.w3.org/TR/css3-multicol/#overflow

Comment 10 by Deleted ...@, Dec 9 2014

msten - looking at the spec it actually says that things should be clipped in the MIDDLE of the column gap which is the opposite of your assumption (it clearly should be clipped at some point).  I'm having this issue and hope it'll be fixed.  It's very minor for me but I think shadows also operate outside of normal clipping rules anyway?  If I put a shadow on an overflow hidden div it displays just fine.

Anyway, I feel that it's the wrong thing to do in this case.  Hope it gets fixed!

Comment 11 by laforge@google.com, Jan 9 2015

Labels: -Cr-Blink-Rendering-MultiCol Cr-Blink-Layout-MultiCol
Migrate from Cr-Blink-Rendering-MultiCol to Cr-Blink-Layout-MultiCol

Comment 12 by laforge@google.com, Jan 9 2015

Labels: -Cr-Blink-Rendering Cr-Blink-Layout
Migrate from Cr-Blink-Rendering to Cr-Blink-Layout

Comment 13 by e...@chromium.org, Jun 15 2015

Owner: msten...@opera.com
Status: Assigned
Did the new multicol implementation fix this?

Comment 14 by msten...@opera.com, Jun 15 2015

No, not fixed, but I'm not sure about if this bug is 100% valid. (see above)

Comment 15 by thejames...@gmail.com, Jul 21 2015

This still needs to be addressed. Also an issue for absolutely positioned children of relative parents. See: https://jsfiddle.net/PUxRD/18/ Chrome crops the circle, while FF displays as intended.

Comment 16 by acwrob...@gmail.com, Jul 21 2015

Agreed. It needs to be allowed, but not necessarily default. Currently, this is not possible in Chrome using CSS multiple columns, afaik. Again, Firefox renders "properly" but both Internet Explorer and Chrome clip the box-shadows.

I firmly believe this should be affected an CSS overflow setting (overflow:hidden, etc.).

@ #15 thejames...@gmail.com, the circle is not cropped for me in Chrome 43.0.2357.134 m ; it looks fine

Comment 17 by e...@chromium.org, Feb 1 2016

Labels: Needs-Feedback
We should ask for clarification with regards to the spec.

Comment 18 by msten...@opera.com, Mar 20 2017

 Issue 420350  has been merged into this issue.

Comment 20 by sheriffbot@chromium.org, Oct 20 2017

Project Member
Labels: Hotlist-Recharge-BouncingOwner
Owner: ----
Status: Untriaged (was: Assigned)
The assigned owner "mstensho@opera.com" is not able to receive e-mails, please re-triage.

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

Comment 21 by e...@chromium.org, Oct 30 2017

Cc: -msten...@opera.com
Components: -Blink>Layout
Labels: -Pri-2 Pri-3
Status: Available (was: Untriaged)

Comment 22 by mstensho@chromium.org, Nov 7 2017

Owner: mstensho@chromium.org
Status: Assigned (was: Available)

Comment 23 by mstensho@chromium.org, Feb 13 2018

Cc: mstensho@chromium.org
Owner: ----
Status: Available (was: Assigned)

Comment 24 by mstensho@chromium.org, Nov 5

 Issue 613136  has been merged into this issue.

Sign in to add a comment