3

I'm having an issue in Chrome with column-count where the descenders of a list item at the bottom of a column are being cut off and appear at the top of the next column. See this image below:

Notice the far right column, above "Slovenia"

That little line at the top of the furthest right column is the end of the serif of the "p" in Slovak Republic. This is only an issue on Chrome, in Firefox the last item is actually "Slovenia" in the second to last column. Changing to a different serif font, or a sans-serif font also doesn't solve the problem (and is actually more noticeable).

break-inside: avoid-column; when applied to the list items doesn't solve the issue, neither does -webkit-column-break-inside: avoid;. I am perhaps not applying it to the right element? A non-javascript solution would, of course, be preferred.

TwoLunch
  • 49
  • 5

1 Answers1

1

This is a known issue. See: http://caniuse.com/#feat=multicolumn

Chrome is reported to incorrectly calculate the container height, and often breaks on margins, padding, and can display 1px of the next column at the bottom of the previous column. Part of these issues can be solved by adding -webkit-perspective:1; to the column container. This creates a new stacking context for the container, and apparently causes chrome to (re)calculate column layout.

jrrdnx
  • 1,565
  • 3
  • 15
  • 23