The view shown below is not rendering correctly in an iOS device.
It works as intended in an android device. Inspecting the page in safari devtools shows that the page is already being rendered, but for some reason its not rendered correctly. The other attached image shows what it should look like. When the modal is opened directly with selectedAddressSet, it renders the view correctly. Any help would be appreciated.
Page not rendered correctly
Page rendered correctly when
selectedAddressSet is set on modal open
<div *ngIf="!selectedAddressSet" [@slideInOut]>
<ion-searchbar
[(ngModel)]="myInput"
[animated]="true"
[autocomplete]="'on'"
placeholder="Search for address"
[showCancelButton]="true"
(ionInput)="onInput($event)"
(ionCancel)="onCancel($event)">
</ion-searchbar>
<ion-list>
<button class="address-item-btn" ion-item *ngFor="let address of addressList" (click)="selectAddress(address)">
<p ion-text color="dark" class="building-name">{{address.buildingName}}</p>
<p ion-text class="area-info">{{address.area}}, {{address.city}}</p>
<p ion-text class="state-info">{{address.state}} - {{address.pinCode}}</p>
</button>
</ion-list>
<div class="background-section">
<ion-row align-items-center justify-content-center text-center>
<img src="assets/imgs/address_search.svg">
</ion-row>
<p ion-text text-center>Search for your building from the search box above.</p>
</div>
</div>
<div *ngIf="selectedAddressSet" [@slideInOut]>
<button ion-button icon-left clear (click)="onCancel() " *ngIf="!isEditMode">
<ion-icon name="arrow-round-back"></ion-icon>
Back to search
</button>
<ion-card>
<ion-card-header>
Enter your complete address
</ion-card-header>
<hr style="margin: 0">
<ion-card-content>
<form [formGroup]="addressForm" #form="ngForm" (ng-submit)="saveAddress()">
<ion-item>
<ion-label color="dark" class="small-label">Block :</ion-label>
<ion-input type="text" formControlName="block" placeholder="A, C"></ion-input>
</ion-item>
<ion-item>
<ion-label color="dark" class="small-label">House Number :</ion-label>
<ion-input type="number" required formControlName="houseNumber" placeholder="52"></ion-input>
</ion-item>
<ion-item>
<ion-label>Default Address</ion-label>
<ion-toggle formControlName="default"></ion-toggle>
</ion-item>
<div padding class="selected-address-display" margin-vertical>
<p ion-text color="dark" class="building-name">{{selectedAddress.buildingName}}</p>
<p ion-text class="area-info">{{selectedAddress.area}}, {{selectedAddress.city}}</p>
<p ion-text class="state-info">{{selectedAddress.state}} - {{selectedAddress.pinCode}}</p>
</div>
<button block ion-button type="submit" color="dark" round [disabled]="!form.valid"
(click)="saveAddress()">
Save Address
</button>
</form>
</ion-card-content>
</ion-card>
</div>
</ion-content>```