Olá, estou utilizando a função javascript window.print()
para imprimir a página html de uma notícia de uma rádio. No Google Chrome está funcionando de acordo com minhas necessidades, mas no Firefox ele corta a maior parte do texto. Abaixo tem 1 print de como fica no Chrome e no Firefox:
Alguém tem alguma ideia do por que isso está acontecendo?
Edit 1: Código fonte da página:
@extends('layouts.page', ['seoToShow' => $newsSeo])
@section('content')
<div class="top_intern ui-container-top">
<div class="container">
<div class="top_intern__box ui-bg-news" style="background-color: {{$news->category->color}}">
<div class="row h-100 align-items-center justify-content-between">
<div class="col-md-8 col-12">
<div class="top_intern__title">
<div class="row align-items-center">
<h2 class="ui-title ui-title--white mb-0">
{{$news->category->name}}
</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="news_intern ui-container">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-8 col-lg-9 col-12">
<div class="news_intern__info">
<div class="row">
<span class="date">
{{$news->dateTime}}
</span>
<span class="author">
Por <b>{{$news->user->name}}</b>
</span>
</div>
</div>
<div class="news_intern__title">
<h1 class="ui-title-intern ui-color-news"
style="color: {{ $news->sponsored == true ? '#ff3036' : $news->category->color}}">{{$news->name}}</h1>
</div>
<div class="news_intern__lead leadfont ui-container-bottom">
<p>{{$news->preview}}</p>
</div>
<div class="news_intern__image ui-container">
<div class="image">
<div class="seo">
<img src="{{$news->image}}" alt="{{$news->name}}" title="{{$news->name}}">
</div>
@if(!empty($news->image))
<the-news-image :extras="{{json_encode($news->images)}}" :imagem="{{json_encode($news->image)}}" :nome="{{json_encode($news->name)}}"></the-news-image>
@endif
</div>
</div>
@if(!empty($news->audio))
<div class="news_intern__ouca">
<div class="row align-items-md-center">
<div class="col-1 d-md-block d-none">
<img src="/img/icon-mic-red.png" alt="Escute">
</div>
<div class="col-md-11 col-12">
<the-waves :button="true" button-class="ui-button ui-button--news"
button-div-class="col-md-5 col-12 text-md-right text-center d-inline-block"
wave-div-class="col-md-7 col-12 d-inline-block" id-wave="audio-news-{{$news->id}}"
audio="{{$news->audio}}" play-class="play_pause">
</the-waves>
</div>
</div>
</div>
@endif
<div class="news_intern__options">
<div class="row align-items-center justify-content-center justify-content-md-start">
<span class="share">
<!-- PASSAR PARÂMETRO URL E SLUG DA NOTÍCIA EM COMPONENTE -->
<the-share url="{{asset($news->category->slug.'/'.$news->slug)}}"></the-share>
</span>
<span class="letters">
<button class="first" onclick="fonte('a')">
<img src="/img/icon-letter-more.png" alt="Zoom" title="Aumentar fonte">
</button>
<button onclick="fonte('d')">
<img src="/img/icon-letter-less.png" alt="Zoom" title="Diminuir fonte">
</button>
</span>
<span class="print d-none d-md-block" onclick="window.print();return false;">
<img src="/img/icon-print.png" alt="Imprimir" title="Imprimir">
</span>
</div>
</div>
<div class="news_intern_text">
<div class="ui-description">{!! $news->description !!}</div>
</div>
@if(!empty($news->video))
<div class="embed-responsive embed-responsive-16by9">
@if($news->video_origin == 1)
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{$news->video}}" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
@endif
@if($news->video_origin == 2)
<iframe
class="embed-responsive-item"
src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fradioaliancaconcordia%2Fvideos%2F{{$news->video}}%2F&show_text=0&mute=false&autoplay=false"
scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
@endif
</div>
@endif
<div class="news_intern__gallery">
<the-gallery :images="{{json_encode($news->images)}}"></the-gallery>
</div>
<div class="news_intern__comments ui-container-top">
<the-news-comments link="{{asset($news->category->slug.'/'.$news->slug)}}" />
</div>
</div>
</div>
</div>
</div>
@endsection
CSS:
@media print {
.menu{
display: none;
}
.menu_bg__fixo{
display: none;
}
.ui-container-top{
display: none;
}
.news_intern__ouca{
display: none;
}
.news_intern__options{
display: none;
}
.embed-responsive{
display: none;
}
.news_intern__gallery{
display: none;
}
.news_intern__comments{
display: none;
}
.news_intern__rel{
display: none;
}
.player-preview{
display: none;
}
.footer__map{
display: none;
}
.footer{
display: none;
}
}