我的模板代码:
<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 ';
}
}
}