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

May 15, 2024

1

I’m creating a web site utilizing Angular 14 and Angular Materials. I’ve encountered a browser-specific problem 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 problem doesn’t happen on Android units or desktop browsers.

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

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" fashion="peak: 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(personal dialog: MatDialog) {}

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

test-dialog.part.html:
<div fashion="overflow: scroll; peak: 350px">
  <p fashion="font-size: 50px">hiya hiya hiya hiya hiya hiya hiya hiya hiya hiya hiya hiya hiya hiya </p>
  <p fashion="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 fashion="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 difficulty demonstrated on this video: Video Hyperlink.

Has anybody confronted an identical problem or does anybody have any insights on what is likely to be inflicting these crashes? How can I forestall this conduct on iOS units?

I arrange an Angular Materials dialog that opens when a person clicks on a specified div in my Angular 14 software. This dialog comprises content material that’s scrollable and contains giant textual content components. I examined the conduct of this dialog on numerous units and browsers.

Supply hyperlink