ios – Angular Materials Dialog Causes Browser Crash or Refresh on iPhone When Zooming

I’m creating a web site utilizing Angular 14 and Angular Materials. I’ve encountered a browser-specific concern on iPhones (each Chrome and Safari) the place the browser both crashes or navigates away from the present web page when a Materials dialog is displayed and the person makes an attempt to zoom in. This concern doesn’t happen on Android gadgets or desktop browsers.

The issue appears to come up when there may be vertical scrolling inside the dialog, and the person performs with the zoom, however I’m not sure if these are the one circumstances that set off the problem.

Here’s a simplified model of the elements concerned:

headline.part.html:

<div (click on)="openDialog()" class="bg-danger d-flex justify-content-center align-items-center" type="top: 250px">

headline.part.ts:

import { Part } from '@angular/core';
import { MatDialog } from '@angular/materials/dialog';
import { TestDialogComponent } from './test-dialog.part';

@Part({
  selector: 'app-headline',
  templateUrl: './headline.part.html',
  styleUrls: ['./headline.component.scss']
})
export class HeadlineComponent {
  constructor(non-public dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(TestDialogComponent, {top: '350px'})
  }
}

test-dialog.part.html:
<div type="overflow: scroll; top: 350px">
  <p type="font-size: 50px">good day good day good day good day good day good day good day good day good day good day good day good day good day good day </p>
  <p type="font-size: 50px">bye bye bye bye bye bye bye bye bye bye bye bye bye bye bye bye bye bye bye bye bye</p>
  <p type="font-size: 50px">hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi </p>
</div>

You’ll be able to see the problem demonstrated on this video: Video Hyperlink.

Has anybody confronted the same concern or does anybody have any insights on what is perhaps inflicting these crashes? How can I forestall this habits on iOS gadgets?

I arrange an Angular Materials dialog that opens when a person clicks on a specified div in my Angular 14 software. This dialog accommodates content material that’s scrollable and consists of massive textual content components. I examined the habits of this dialog on numerous gadgets and browsers.