iOS 13 - Camera - scroll-content margin modified

Ionic Framework ionic-v3
1

Hello,

I installed iOS 13 yesterday and now I noticed that the first time I open the camera plugin, the margin of the div scroll-content is modified. Concretely this means that the first item of my list is overed by the ion-header (partially on iPhone 7, fully on iPhone X…). Scrolling down does not help.

But if leave and reopen the page, that problem does not exist anymore.

Here is the header of my page before I call the camera plugin

IMG_0032
IMG_0032.PNG750×242 14.4 KB

And then after, when the camera is closed

IMG_0030
IMG_0030.PNG750×203 13.8 KB

Has anyone met the same problem and found a solution?

2

Did you find the solution? I have the same problem :frowning:

3

Hello,

Sorry I did not found any real situation but just a workaround that mitigates the situation.

The idea is to apply an additional class if it is the first time the page is opened:

.list.list-ios.wa_ios13_7 { margin-top: 20px; }
.list.list-ios.wa_ios13_1 { margin-top: 42px; }

The class will be loaded or not like thanks to the function classIos():

<ion-list [ngClass]="classIos()">
	.... 
<ion-list>


classIos(){
	if (this.work_around_ios13 == 1) {
		return 'wa_ios13_7';
	} else if (this.work_around_ios13 == 2) {
		return 'wa_ios13_1';
	} else {
		return '';
	}
}

The value of the variable work_around_ios13 is just after triggering the camera function:

setiOSclass() {
	if (this.serviceURL.isFirstTimeLoad() == 1) {

		if (this.device != null) {
			if (this.device.version.substring(0, 2) == '13') {

				if (this.device.model == null) {
					this.work_around_ios13 = 1;
				} else if (this.device.model.substring(0, 7) != 'iPhone1') {
					// iPhone 6 / 7 / 8
					this.work_around_ios13 = 1;
				} else {
					// iPhone X
					this.work_around_ios13 = 2;
				}
			}
		}
	}
}



		this.camera.getPicture(options)
					.then(....);
		this.setiOSclass();

isFirstTimeLoad() is just a function that counts how many times it has been called. I just put it in the provider that manages the authentification:

public nb_load: number = 0;

isFirstTimeLoad(){
	// Work around iOS 13
	this.nb_load++;

	return this.nb_load;
}

Hope I am clear enough, good luck!

4

This is due an issue with the cordova-plugin-statusbar. It was fixed in this commit: https://github.com/apache/cordova-plugin-statusbar/commit/13645b9f53a58ad5c0041247087f1f2864ef4c29

1 Like