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

时间:2018-11-27 13:24:30

标签: angular safari angular-material

我的模板代码:

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

0 个答案:

没有答案