Weird margin or padding in simulator

Ionic Framework ionic-v3
1

Hello everyone,
this is my first post here, and actually my first app with ionic.
I found a strange behavior during simulation on IOS device (this app is designed soley for this platform): When i make a selection by using ion-select, or clicking to a button, a weird margin or padding appear between ion-header and ion-content.
Look a those two screenshot:
BEFORE
33
AFTER
02

The yellow part is ion-header, the blue one is ion-content.

Obiously, during ionic serve, in browser, does not have this problem. In device running however, either on simulator and device, this problem occurs.

Please help, I have no more ideas.

Valerio

2

I have the same issue … It looks as though there is a problem with the placement of the button element within the ion-select.

You can click on the header and the select popup will open. Notice the additional line under the header.

ion-select
ion-select.PNG1246×698 79.4 KB

HTML Source:


{{attribute1.attributeName}}:
<ion-select attribute [(ngModel)]=“selectedAttributeValueKey1” okText=“Select” cancelText=“Cancel” [selectOptions]="{title: ‘Select Size’}">
<ion-option *ngFor=“let attributeValue of attributeValues” [value]=“attributeValue.attributeValueKey”>{{attributeValue.attributeValueName}}

3

Hello,
the problem seems to be relative to IOS11 only. I cannot repro in android or IOS < 11.
Seems to be resolved (or mitigated) using CDVWKWebViewEngine.

4

I dont agree with that assessment…i am using android