Page printing is bugged in firefox

Question

Hi, I’m using javascript window.print() to print a radio news html page. In Google Chrome is working according to my needs, but in Firefox it cuts most of the text. Below is 1 print of how it looks in Chrome and Firefox:

In Firefox:

In Chrome:

Does anyone have any idea why this is happening?

Edit 1: Page source code:

    @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;
  }
}

Answer 1

As I am using bootstrap 4, I used the print classes provided by it, to hide the unwanted content and display block the content that will be printed. This way I managed to hide elements with absolute position and also managed to solve some bugs of firefox in prints with more than 1 page.

Bootstrap 4 printing facilities can be found in the link https://getbootstrap.com/docs/4.3/utilities/display/#display-in-print