Tenho uma página que imprime tickets em 3 vias. Cada via do ticket está dentro de uma div
com a classe ticket
.
Após cada via, preciso gerar uma quebra de página. Porém, ao utilizar o page-break-after: always;
no Google Chrome, algumas vezes (a depender do conteúdo), o Google Chrome quebra a página fora do lugar desejado, desconfigurando toda a impressão. (veja na imagem abaixo a imagem que seria a logomarca cortada).
No Microsoft Edge funciona perfeitamente.
Para facilitar a reprodução do erro, segue abaixo o meu código HTML com CSS inline
.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{font-family: arial;}
@media print {
.ticket{
page-break-after: always;
page-break-inside: avoid;
position: relative;
}
body{
position: relative;
background-color:red;
}
}
</style>
</head>
<body>
<div class="ticket">
<img src="http://lorempixel.com/output/animals-q-g-198-44-7.jpg" alt="LOGO" /><br/>
RAZAO SOCIAL DA EMPRESA LTDA.<br/>
Endereço: Av. QUALQUER LUGAR, NÚMERO 000. NOME DO BAIRRO.<br/>
CNPJ: 11.111.111-1111-11<br/>
TF: 11.111.111 FP<br/>
Isento de ISS (lei número 1.111)<br/>
Telefones: 0800 111 1111 <br/>
(00)00000-0000<br/>
(00)00000-0000<br/>
<br/>
<strong>Via 1</strong>
<DIV style="border:1px solid #000; padding:10px;font-size:20px;font-weight:bold;width:100%;text-align:center;">Por favor, entregue <br/>esta via ao xxxxxxx</DIV><br/>
<DIV style="font-size:18px;font-weight:bold;width:100%;text-align:center;">TICKET: <span style="font-weight:bold;">00000000000000</span></DIV>
Tipo: XYZ<br/>
<strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
<strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
<strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
<strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
<strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
<strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
</div>
<div class="ticket">
<img src="http://lorempixel.com/output/animals-q-g-198-44-7.jpg" alt="LOGO" /><br/>
RAZAO SOCIAL DA EMPRESA LTDA.<br/>
Endereço: Av. QUALQUER LUGAR, NÚMERO 000. NOME DO BAIRRO.<br/>
CNPJ: 11.111.111-1111-11<br/>
TF: 11.111.111 FP<br/>
Isento de ISS (lei número 1.111)<br/>
Telefones: 0800 111 1111 <br/>
(00)00000-0000<br/>
(00)00000-0000<br/>
<br/>
<strong>Via 2</strong>
<DIV style="border:1px solid #000; padding:10px;font-size:20px;font-weight:bold;width:100%;text-align:center;">Por favor, entregue <br/>esta via ao xxxxxxx</DIV><br/>
<DIV style="font-size:18px;font-weight:bold;width:100%;text-align:center;">TICKET: <span style="font-weight:bold;">00000000000000</span></DIV>
Tipo: XYZ<br/>
<strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
<strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
<strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
<strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
<strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
<strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
</div>
<div class="ticket">
<img src="http://lorempixel.com/output/animals-q-g-198-44-7.jpg" alt="LOGO" /><br/>
RAZAO SOCIAL DA EMPRESA LTDA.<br/>
Endereço: Av. QUALQUER LUGAR, NÚMERO 000. NOME DO BAIRRO.<br/>
CNPJ: 11.111.111-1111-11<br/>
TF: 11.111.111 FP<br/>
Isento de ISS (lei número 1.111)<br/>
Telefones: 0800 111 1111 <br/>
(00)00000-0000<br/>
(00)00000-0000<br/>
<br/>
<strong>Via 3</strong>
<DIV style="border:1px solid #000; padding:10px;font-size:20px;font-weight:bold;width:100%;text-align:center;">Por favor, entregue <br/>esta via ao xxxxxxx</DIV><br/>
<DIV style="font-size:18px;font-weight:bold;width:100%;text-align:center;">TICKET: <span style="font-weight:bold;">00000000000000</span></DIV>
Tipo: XYZ<br/>
<strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
<strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
<strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
<strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
<strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
<strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
</div>
</body>
</html>
Como fazer a quebra de página ocorrer no local correto usando o Google Chrome?