search

rachelandrew / multicol-wip

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

Grid in columns issues #2

Open JayPanoz opened 7 years ago

JayPanoz commented 7 years ago

Disclaimer: I’m primarily doing ebooks, which means columns are used at the :root level to paginate contents. Since there is nothing else to manage paged media in ebooks apps, I guess this is one of the major use cases for CSS3 multicol at the moment (and authors don’t have any choice). However, the following bugs happen in multicol anyway (they’re not scoped to ebooks, they apply to the web as well).

From experience, modern layout specs (flexbox + grid) have quite a significant number of rendering issues in multi-columns. I’ve started searching for grid issues but am very likely to follow up with flexbox issues in the next weeks. At first sight, a lot of those issues are related to fragmentation.

This is what happens when you’re using something like 

element {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
}

Chrome (reference)

blind-grid

This is the expected result.

Now in Firefox…

firefox-grid

Surprisingly, it looks like the element is pushed to the next column (while it could fit in the current one).

And finally Safari…

webkit-grid-clip

As you can see, text overflows and is clipped. If you reverse the order and apply a border to the text’s container (a figcaption there), it is however computed as expected:

webkit-grid-error

But for some reason, text doesn’t wrap.

More generally, using flex or grid in columns is the surest way to have contents cut-off in multicol. Unfortunately, It seems implementers pay very little attention to the multicol context when implementing the new layout specs. :-(

rachelandrew commented 7 years ago

Thanks for these - it is definitely going to be worth doing some testing with multicol + newer specs, and making sure these issues get raised against the relevant spec (if it is a grid/flex issue) and in browsers where it is an interop issue.

JayPanoz commented 7 years ago

Ah, I just realized that this happens when 1. column’s height is constrained and 2. there are overflow columns. Consequently, I’ll try to check issues I may report without those conditions to see whether they make a difference or not.