Bug 14137 - box-shadow on element inside multi-column doesn't draw outside column boundary
Summary: box-shadow on element inside multi-column doesn't draw outside column boundary
Status: REOPENED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 523.x (Safari 3)
Hardware: PC Windows 2000
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar, NeedsReduction
Depends on:
Blocks:
 
Reported: 2007-06-14 06:34 PDT by Andrew Stibbard
Modified: 2024-04-01 17:34 PDT (History)
10 users (show)

See Also:


Attachments
Testcase for box-shadow boundary on elements in multi-column (1.50 KB, text/html)
2007-06-14 06:36 PDT, Andrew Stibbard
no flags Details
rendering in safari, firefox, chrome (296.87 KB, image/png)
2023-11-29 20:46 PST, Karl Dubost
no flags Details
rendering in safari, firefox, chrome (326.91 KB, image/png)
2023-11-29 20:51 PST, Karl Dubost
no flags Details
comparison of box-shadows across CSS columns (31.35 MB, image/png)
2024-04-01 15:56 PDT, Brandon McConnell
no flags Details
comparison of box-shadows across CSS columns - outlined (31.31 MB, image/png)
2024-04-01 16:03 PDT, Brandon McConnell
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Andrew Stibbard 2007-06-14 06:34:50 PDT
If box-shadow is applied to an element inside a CSS multi-column, the shadow is cut off at the column's boundary.

Testcase to follow demonstrating box-shadow working correctly for floated elements but not elements in columns.

Tested on the Windows Safari 3 Beta (522.11.3). Probably not platform specific but I don't have a Mac to test against, sorry.
Comment 1 Andrew Stibbard 2007-06-14 06:36:14 PDT
Created attachment 15018 [details]
Testcase for box-shadow boundary on elements in multi-column
Comment 2 Matt Lilek 2007-06-14 11:22:07 PDT
I believe this is part of the "layers ignore columns" problem.
Comment 3 Dave Hyatt 2007-06-14 12:29:21 PDT
No, this is just a clipping problem.  At one point the spec said to treat overflow like it was hidden on columns.  I don't think it says that now though.
Comment 4 Radar WebKit Bug Importer 2016-06-02 17:07:03 PDT
<rdar://problem/26613471>
Comment 5 Jen Simmons 2016-06-08 05:28:12 PDT
Yes, I find this quite frustrating. 

Here's an example: http://labs.jensimmons.com/examples/image-gallery-multicolumn.html
See how all the shadows from the top of the boxes are placed in the bottom of the previous column? And how the shadow from the bottom if the box of the longest column is placed at the top of the previous column? Bug. 

Here's a photo to be more obvious: https://monosnap.com/file/wCjt9v38xTPPTmGQJ8t42jvEgqioEM.png

It's one of the many little multicolumn bugs that prevent people from trusting or using multicolumn.

This happens in Mac Safari, iOS Safari, and Chrome (old webkit).
Comment 6 Brandon McConnell 2023-01-23 16:20:02 PST
It appears this now fixed in Chrome and Firefox, probably due to recent updates, as it was still broken in all browsers (IIRC) just a couple of years ago.

https://labs.jensimmons.com/2016/examples/image-gallery-multicolumn.html

Screenshots for all three can be found here, and each is labeled with the name of the browser from which the screenshot was taken: https://imgur.com/a/HJBUiZW

This is using Safari Technology Preview Release 161 (Safari 16.4, WebKit 18615.1.17.6)
Comment 7 Karl Dubost 2023-11-29 20:46:03 PST
Created attachment 468816 [details]
rendering in safari, firefox, chrome
Comment 8 Karl Dubost 2023-11-29 20:51:09 PST
Created attachment 468817 [details]
rendering in safari, firefox, chrome

Removing the webkit prefixes for columns

We get more or less the same rendering. There are slight differences, but there are more related to things inside the columns and not the shadows.
Comment 9 Brandon McConnell 2023-11-29 22:23:57 PST
Karl, would you mind providing screenshots for all three browsers of the original example where the border was cut off? It was a very specific edge case.
Comment 10 Karl Dubost 2023-11-30 00:05:32 PST
(In reply to Brandon McConnell from comment #9)
> Karl, would you mind providing screenshots for all three browsers of the
> original example where the border was cut off? It was a very specific edge
> case.


I did (?) my last two comments:
Using https://bug-14137-attachments.webkit.org/attachment.cgi?id=15018

with -webkit-
https://bugs.webkit.org/attachment.cgi?id=468816

without -webkit- (so we can see the behavior with firefox)
https://bugs.webkit.org/attachment.cgi?id=468817
Comment 11 Brandon McConnell 2024-04-01 12:42:25 PDT
@Karl, I think the issue here is that the shadow is cut off at the column's boundary and is still in the new images you added. Will this be addressed?
Comment 12 Karl Dubost 2024-04-01 15:25:22 PDT
@Brandon,

I don't see the difference in between browsers in the screenshot. Could you upload
https://bugs.webkit.org/attachment.cgi?id=468817
but with a circle on the area you think is different in between browsers in that screenshot? 

Or are you saying the rendering is bad in the 3 browsers?
In that case probably this also should be opened on the CSS Working Group. 

That will help me to understand as I do not see it now. :) 
Thanks.
Comment 13 Brandon McConnell 2024-04-01 15:56:09 PDT
Created attachment 470708 [details]
comparison of box-shadows across CSS columns

@Karl See the differences as rendered here in Jen's example:

https://labs.jensimmons.com/2016/examples/image-gallery-multicolumn.html
Comment 14 Brandon McConnell 2024-04-01 16:03:14 PDT
Created attachment 470709 [details]
comparison of box-shadows across CSS columns - outlined

@Karl here is that same attachment, but with the problematic area outlined per your request
Comment 15 Jen Simmons 2024-04-01 16:38:41 PDT
@Karl I'm not sure when/why this got marked "RESOLVED CONFIGURATION CHANGED". It's still broken. Same as always. 

In fact, I've been making new multicolumn demos over the last few weeks, and they all have this problem. It's not just the drop shadow, but also margins that end up in the wrong column.
Comment 16 Karl Dubost 2024-04-01 17:34:59 PDT
Ha thanks! This is a lot clearer. Now I understand the issue.
We need a different test case to make it simple and obvious. I'll see if I can come up with something later. 

@Jen I closed based on the initial test case which was added to the bug. I was not seeing what was wrong. I didn't see it either in your demo until 
https://bugs.webkit.org/attachment.cgi?id=470709

Cool! Thanks both of you.