Ionic is behaving very wierdly when built on IOS.
I have a simple page to add an item, using only ionic inputs and an ion button in the footer. However for some reason after a few seconds on interaction the actual display is not synced up with the buttons. What i mean by that is that the button will not active when you tap it, however if you tap maybe 1cm above it, it actives. This is the same for all the inputs on the page, you have to tap 1cm above them to access them, as if the screen has moved up but isnt displaying this.
When i inspect it with safari, the app page container highlights like this - it is 1cm raised from where it should be, but the page being displayed is in the correct place.
This only happens when it is viewed on device, and in the browser it is fine.
I did some trial and error testing and found that this element seems to be causing this behaviour - when its commented out, all functions properly:
<div class="images-wrapper flex-center" *ngIf="images.length == 0">
<div class="images flex-center">
<div class="add-image flex-center" (click)="onImageAdd()">
<img style="margin-left: 8px" src="assets/icons/camera-add.png" />
</div>
</div>
</div>
<div class="images-wrapper flex-center" *ngIf="images.length > 0">
<div class="images flex-row">
<div class="edit-image flex-center" *ngFor="let image of images" (click)="onImageDelete(index)">
<img class="photo" [src]="image.src" />
</div>
<div class="add-image flex-center" (click)="onImageAdd()">
<img style="margin-left: 8px" src="assets/icons/camera-add.png" />
</div>
</div>
</div>
and the css for this:
.images-wrapper {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
height: 130px;
overflow: hidden;
.images {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
padding: 10px;
.add-image {
width: 110px;
height: 110px;
flex: 0 0 auto;
overflow: hidden;
border-radius: 10px;
margin: 5px;
border: 2px dashed rgb(59, 59, 59);
background: rgb(240, 240, 240);
img {
width: 50%;
height: 50%;
object-fit: contain;
}
}
.edit-image {
width: 110px;
height: 110px;
flex: 0 0 auto;
overflow: hidden;
margin: 5px;
border-radius: 10px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
}
}
}
any advice here?