search

rachelandrew / multicol-wip

Somewhere to store stuff relating to my work on Multi-column layout
MIT License
11 stars 0 forks source link

Jen's bug demo #1

Open jensimmons opened 7 years ago

jensimmons commented 7 years ago

I made a demo to show off the bugs I could find: http://labs.jensimmons.com/2016/examples/multicolumn-3-bug-demo.html

Here's what I know is broken:

1) Broken Shadows

In Safari and Chrome, the drop shadows from boxes end up breaking away from their box, and showing up on the bottom of the previous columns, or the top of the next column. The bug is not the same in both — the problem with the shadow appearing at the top only seems to happen in Safari. I have not seen this problem in Firefox. I have not tested in other browsers. Chrome: https://monosnap.com/file/VWENRmvXFOSPGeLIuVNOzaW7c9MpXf.png Safari: https://monosnap.com/file/1o4x8WsAXPnKHEYAj3iRCIu28wpjt6.png

2) Inconsistent Top Margin

If you put a top margin on content, the margin does not collapse in the first column, but it does collapse in all the other columns. This inconsistency is bad. For example: https://monosnap.com/file/ZG6plPyzC8C4aPw2IJJic2QjCe2CEU.png (same in Chrome, Safari, Firefox) It would be better if the margin always collapses, or if it never collapses. The only practical work around is to never ever put top margins on any content that's in columns. Which is a dumb workaround.

3) Lack of support for break in Firefox

Firefox needs to add support for break-*. Meanwhile, some needs can be covered with substituting other properties (which is what Autoprefixer will do) — for example, page-break-inside: avoid. In other cases, there is no way to get support, like for break-before: column;. I don't have a comprehensive understanding of what is and is not possible (for my demos, I use break-inside: avoid a lot, and not much of the rest of it). Jen Robbins @jenville was just going through some of this for her book and may have deeper research.

JayPanoz commented 7 years ago

Inconsistent Top Margin

FWIW, I can also see a top-margin in the third column in Safari (related to box-shadow?).

capture d ecran 2017-08-19 a 19 35 41

And it becomes even worse when setting an explicit break-before|after. I know people have been using padding-top because margin-top collapses in some browsers.