CSS-столбцы подсчитывают, что потомки обрезаются и переходят в следующий столбец

Question

У меня проблема в Chrome с column-count где спуски элемента списка внизу столбца обрезаются и появляются вверху следующего столбца. Смотрите это изображение ниже:

Обратите внимание на крайний правый столбец над "Словенией".

Эта маленькая строчка вверху самого дальнего правого столбца является концом с засечками "р" в Словацкой Республике. Это только проблема в Chrome, в Firefox последний элемент - это "Словения" во втором и последнем столбце. Переключение на другой шрифт с засечками или шрифт без засечек также не решает проблему (и на самом деле более заметно).

break-inside: avoid-column; при применении к элементам списка не решает проблему, а также не -webkit-column-break-inside: avoid;, Я возможно не применяю это к правильному элементу? Конечно, предпочтительным было бы решение без поддержки JavaScript.

Answer 1

Это известная проблема. Смотрите: http://caniuse.com/

Сообщается, что Chrome неправильно вычисляет высоту контейнера и часто разбивается по полям, отступам и может отображать 1px следующего столбца в нижней части предыдущего столбца. Часть этих проблем можно решить, добавив -webkit-perspective:1; к контейнеру столбца. Это создает новый контекст стекирования для контейнера и, по-видимому, заставляет chrome (пере) вычислять расположение столбцов.