Печать карты AGM показывает разрыв в распечатке

Question

Печать моей угловой карты AGM из хрома Я получаю большой серый разрыв на карте:

Как видите, не толькотам серая полоса (она становится белой, если я отключаю «фоновую графику»), но она также сдвигает изображение карты под ней вниз

Ниже приведен простой код, необходимый для воспроизведения этой проблемы:

app.component.ts :

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
        <button (click)="clickPrint()">print</button>
        <agm-map id="Gmap" [latitude]="34.051759" [longitude]="-118.244576" [zoom]="17"></agm-map>
        `,
    styles: [`
        agm-map {
            height: 800px; //height: 100%;
        }
        button {
            position: absolute;
            z-index: 10;
        }
    `]
})
export class AppComponent {
    clickPrint() {
        print()
    }
}

app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AgmCoreModule } from '@agm/core'

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AgmCoreModule.forRoot(/*{
            apiKey: 'YOUR_API_KEY'
    }*/),
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

styles.css :

html, body {
    margin: 0px;
    height: 100%;
    overflow: hidden;
}

Примечание: убедитесь, что вы нажали кнопку Print, чтобы увидеть проблему

Я включил ссылку на StackBlitz на тот случай, если вы хотите повозиться с моим неработающим кодом: StackBlitz Link

Другая информация, касающаяся моей проблемы:

• Я не делаю ничего необычного с этой демонстрацией, это просто карта углового AGM, которую я пытаюсь напечатать.
• Если я изменю масштаб или перемещаюсь, размерразрыв в карте при печатибудет колебаться, но я надеюсь, что какой-то трюк CSS поможет мне полностью устранить его.Большое спасибо за вашу помощь!

Answer 1

Добавьте свойство отображения и ширины к

    agm-map {
        height: 800px;
        width:800px;
        display:inline-flex;
    }

отметьте stackblitz

надеюсь, что это то, что вы искали.