Печать показывает пустую диагональную обрезку

Question

Я пытаюсь сделать церковный сборник песен для печати:

• Два столбца
• HTML-страница отображается с рельсов, но каждая песня является компонентом реакции

Представление имеет следующий код:

<div class='print-book'>
  <%= @song_data.sort_by { |data| data[:reference].index.to_i }.map do |song_data| %>
    <div class='print-song'>
      <div class="song-number"><%= song_data[:reference].index %></div>
      <%= react_component(
        'SongDisplay',
        lyrics: song_data[:song].lyrics
      ) %>
    </div>
  <% end %>
</div>

CSS:

.print-book {
  column-count: 2;
}

.print-song {
  page-break-inside: avoid;
}

.print-section {
  page-break-inside: avoid;
}

Но, как вы можете видеть на скриншоте, когда я пытаюсь распечатать, превью показываетдиагональная вырезка на странице, исключающая большую часть страницы.

Есть идеи о том, что вызывает это?В html (не для предварительного просмотра) песни отображаются нормально.