使用CSS网格（带有Angular材质的Angular 6）时，mat-raised-button在Safari浏览器上不起作用

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） 借助平垫按钮，一切正常！

这是我的Stackblitz示例

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

有什么解决办法吗？

我正在使用：

“ @ angular / animations”：“ 6.1.3”，

“ @ angular / common”：“ 6.1.3”，

“ @角度/材质”：“〜6.4.6”，

我的解决方法

grid-template-rows：$ menubar-hight 1fr $ footer-hight;在我的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 ';
        }
    }
}