FireFox печать неправильного размера и не показывает карты

Question

У меня есть сайт с HTML и CSS, размещенными внизу. То, что вы увидите, есть элементы, которые не напечатаны. И те, которые печатаются, устанавливаются на width: 100vh и height: 100vh при печати с разрывом страницы до и после. Если вы просматриваете веб-сайт в chrome и нажимаете «Печать», он выглядит великолепно. В Firefox он не загружает карты должным образом и все неправильно масштабирует. Я не могу понять, почему. Демонстрация в реальном времени на https://targets.ekit.xyz

Однако в Firefox это выглядит ужасно. Он вообще не показывает MapKit JS, чего я не знаю почему, и не имеет правильного размера:

<React.StrictMode>
  <MapkitProvider tokenOrCallback={mapkitKey}>
    <div className="full-width not-printed">
      <TargetForm
        targets={targets}
        onUpdate={targetsUpdated}
        coordinateFormat={mapSettings.coordinateFormat}
        token={token}
        userCoordinate={userCoordinates}
      />
    </div>
    <div className="printable-kneeboard print-full-screen">
      <div className="small">
        <Map
          settings={{
            ...mapSettings,
            showTitleArea: false,
            showNoteArea: false,
            showCoordinates: false,
          }}
          targets={targets.length > 0 ? targets : defaultTargets}
          onMapClick={coordinates => setUserCoordinates(coordinates)}
        />
      </div>
      <div className="medium">
        <Map
          settings={{ ...mapSettings, zoom: 'medium', showCoordinates: false, showDpiLabel: false }}
          targets={targets.length > 0 ? targets : defaultTargets}
          onMapClick={coordinates => setUserCoordinates(coordinates)}
        />
      </div>
      <div className="large">
        <Map
          settings={{ ...mapSettings, zoom: 'far', showDpiLabel: false }}
          targets={targets.length > 0 ? targets : defaultTargets}
          onMapClick={coordinates => setUserCoordinates(coordinates)}
        />
      </div>
    </div>
    <div className="full-width not-printed">
      <MapSettingsForm onUpdate={settingsChanged} settings={mapSettings} />
    </div>
    <div className="landscape-page  print-full-screen" style={{ position: 'relative' }}>
      <Map
        settings={{
          ...mapSettings,
          showTitleArea: false,
          showNoteArea: false,
          showCoordinates: false,
        }}
        targets={targets.length > 0 ? targets : defaultTargets}
        onMapClick={coordinates => setUserCoordinates(coordinates)}
      />
    </div>
    <br className="not-printed" />
    <div className="landscape-page print-full-screen" style={{ position: 'relative' }}>
      <Map
        settings={{ ...mapSettings, zoom: 'medium', showCoordinates: false, showDpiLabel: false }}
        targets={targets.length > 0 ? targets : defaultTargets}
        onMapClick={coordinates => setUserCoordinates(coordinates)}
      />
    </div>
    <br className="not-printed" />
    <div className="landscape-page  print-full-screen" style={{ position: 'relative' }}>
      <Map
        settings={{ ...mapSettings, zoom: 'far', showDpiLabel: false }}
        targets={targets.length > 0 ? targets : defaultTargets}
        onMapClick={coordinates => setUserCoordinates(coordinates)}
      />
    </div>
  </MapkitProvider>
  <style jsx>
    {`
      .full-width {
        width: 1024px;
      }
      .small {
        grid-area: small;
        position: relative;
      }
      .medium {
        grid-area: medium;
        position: relative;
      }
      .large {
        grid-area: large;
        position: relative;
      }
      .printable-kneeboard {
        display: grid;
        grid-template-areas:
          'medium large'
          'small large';
        width: 1024px;
        height: 792px;
        grid-gap: 20px;
      }
      .landscape-page {
        width: 1024px;
        height: 792px;
      }
    `}
  </style>
  <style jsx global>
    {`
      body,
      button,
      input,
      optgroup,
      select,
      textarea {
        font-family: ${theme.fonts.ui};
      }

      @media print {
        .not-printed {
          display: none !important;
        }
      }

      @media print {
        .print-full-screen {
          width: 100vw !important;
          height: 100vh !important;
          page-break-after: always !important;
        }
      }
    `}
  </style>