css - color - Consultas de Safari Print Media que no coinciden con otros navegadores/cortando

print background image css

Question

Tengo una aplicación web que se ve bien cuando se procesa en Safari, pero el navegador no respeta las consultas de medios impresos. En Chrome, todo el área imprimible se ve bien, sin embargo, en Safari parece ser solo una variación del contenido visible.

Al desplazarse hacia abajo en la página, el encabezado o el área superior se cortan, al imprimir más alto en la página, se corta la parte inferior.

He intentado lo siguiente para las consultas de medios impresos (sin ningún efecto) -

1. Estableciendo una min-height
2. Establecer cualquier variación de un valor de height en el contenedor
3. Alejar e imprimir
4. Cambio de resolución / escala

Nada parece tener ningún efecto en absoluto.

A diferencia de Chrome, no puedo encontrar una manera de depurar por qué está sucediendo ni una forma de depurar los estilos de impresión.

Nota: Estoy usando Bootstrap para los estilos, así que hay contenedores, filas, tramos, etc., pero incluso eliminarlos por completo y todo lo que está en su propia línea no hace diferencia, la misma "altura" del contenido se muestra en la impresión.

Answer 1

He tenido muchos problemas con las consultas de medios impresos entre navegadores en el pasado. Lo que ayuda mucho con la regulación visual es establecer un tamaño de página fijo y html / body.

Por ejemplo:

@media print {
    @page {
        size: 1600px;
    }

    body,
    html {
        width: 1600px;
    }
}

Answer 2

No recibí ninguna respuesta aquí después de señalar el problema en los comentarios anteriores y mencionar que era una recompensa gratis. Lamentablemente, me encantaría regalar la recompensa para que cualquiera que la vuelva a publicar antes de que la recompensa caduque, puede tenerlo:

El problema era que la aplicación que estoy usando es una aplicación de JavaScript que se ejecuta y crea el cuerpo de la página que tenía solo 400 px de alto. Después de que se represente el cuerpo hay un cuadro de diálogo modal de arranque separado que se mostraba con el contenido para imprimir y todo el CSS era bueno y las consultas de los medios eran buenas, pero el contenido de los modales era mayor que el cuerpo.

Tras la inspección, parece que Safari (y probablemente otros navegadores) no estaban teniendo en cuenta la altura de los cuadros de diálogo al calcular la altura del cuerpo.

Chrome y Firefox estuvieron de acuerdo con esto porque imprimió todo el contenido visible pero en Safari solo imprime contenido que es tan alto como el cuerpo, que en este caso era aproximadamente el 30% del modal. Al activar manualmente el cuerpo para que sea min-height: 1200px; resolvió el problema ya que era la altura máxima posible del contenido del diálogo Bootstrap Modal.