page-break-inside: элемент избежания и блокировки уровня создает пустой столбец в Chrome

Question

В этой скрипте https://jsfiddle.net/rpep00dg/7/ к содержимому добавляется пустой столбец в Chrome. Если вы откроете скрипку в Firefox или Safari, перед "Заголовком" не будет пустого столбца. Это похоже на случай, если первый элемент - это любой элемент уровня блока, такой как p тег.

Это ошибка Chrome, которая задокументирована где-нибудь? Также есть какие-то обходные пути, чтобы он отображал как Firefox и Safari?

section {
  page-break-inside: avoid;
  margin-bottom: 10px;
}

html {
  height: 100%;
}

body {
  column-count: 2;
  column-gap: 36px;
  width:100%;
  height: 100%;
  column-fill: auto;
}

<section>
<h1>Header</h1>
<section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section>
<section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section>
</section>

Answer 1

Пара вопросов здесь:

Вы забыли закрыть section в вашем заголовке h1 тег. Закройте это, и это будет хорошо работать в Chrome.

Во-вторых:

Учитывая следующее для конкретных браузеров:

-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
 column-count: 2; /*Default

Я тестировал приведенный выше код, и он работает, как ожидалось.

Надеюсь, поможет.