кнопка поднятой циновки не работает в браузере Safari при использовании CSS Grid (Angular 6 с Angular Material)

Question

Код моего шаблона:

<div>
    <div class="margin-top-title">
        <div>
            <h1>Test</h1>
        </div>
    </div>
    <form>
        <div *ngIf="true">
            <div>
                <div style="height: 2000px">test</div>
            </div>
        </div>
        <div>
            <div>
                <button (click)="click()">
                    Test Button
                </button>

                <button mat-flat-button color="primary" (click)="click()">
                    Material Flat Test Button
                </button>

                <button mat-raised-button color="primary" (click)="click()">
                    Material Raised Test Button
                </button>
            </div>
        </div>
    </form>

</div>

Мой компонент:

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

@Component({
    selector: 'testdaten',
    templateUrl: './testdaten.component.html',
    styleUrls: ['./testdaten.component.scss'],
})
export class TestdatenComponent implements OnInit {

    constructor() {
    }

    public ngOnInit(): void {
    }

    public click(): void {
        alert('click');
    }
}

Как только мне нужно прокрутить, чтобы добраться до кнопки в браузере Safari, поднятая кнопка не работает.Если я нажимаю на поднятую кнопку, браузер Safari просто прокручивается вверх.Функция не будет вызвана!(Даже если я использую NoopAnimationsModule) С mat-flat-button все работает отлично!

Вот мой пример Stackblitz

https://stackblitz.com/edit/angular-m5f2wl-h1tz3s

Есть идеи, как это исправить?

Я использую:

"@ angular / animations": "6.1.3",

"@ angular / common": "6.1.3",

"@ angular / material": "~ 6.4.6",

Мой обходной путь

grid-template-row: $ menubar-hight 1fr $сноска-высота;на моем app.component.html делает проблему в Safari.(Я не знаю почему)

Мое решение использует CSS-переключатель только для Safari

.my-wrapper {
    display: grid;
    grid-template-rows: $menubar-hight 1fr $footer-hight;
    grid-template-columns: 1fr;
    grid-template-areas: 'header' 'content' 'footer ';
}

/*Safari only override*/
@media not all and (min-resolution:0.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
        .my-wrapper {
            display: grid;
            grid-template-rows: $menubar-hight auto $footer-hight;
            grid-template-columns: 1fr;
            grid-template-areas: 'header' 'content' 'footer ';
        }
    }
}