Please help! Plugin not working via Xcode

[RatBoyJim]

Describe the bug
The plug in works perfectly and as expected on web or ionic lab with an overlay appearing over the camera preview when toBack is set to true.

Unfortunately when running the app via Xcode, the camera preview does not appear at all. When changing the value of toBack to false, the camera preview appears but the overlay is covered.

Expected behavior
I would expect/hope the plugin would behave the same way on the device via Xcode as it does via Ionic lab/web.

Screenshots
Web

Device

Desktop (please complete the following information):

• OS: iOS
• Browser Chrome
• Version 107.0.5304.87

Smartphone (please complete the following information):

• Device: iPhone13
• OS: iOS 16.0.0
• Browser: stock browser, safari
• Version: 16.0

Additional context
It looks as though the cameraPreview is being treated differently in terms of styling. On web I can effect the styling of the preview (width, length etc) in scss via the class assigned to the cameraPreview in CameraPreviewOptions. On the iOS device I cannot do this at all. The only thing that effects the styling of the cameraPreview are the height, width and positioning settings in CameraPreviewOptions.

Any help will be massively appreciated as this issue has held up my current project for nearly 2 weeks now :(

[RatBoyJim]

ts file

html

scss

`ion-content {
--background: transparent !important;
// --background: url("../../../../assets/images/DeliverySuccessimg.png") no-repeat center center fixed !important;
}

ion-content::part(scroll) {
background: transparent !important;
}

ion-content::part(background) {
background: transparent !important;
}

.cameraPreview {
margin-top: 20px;
z-index: 5;
}

#cameraPreview {
margin-top: 20px;
z-index: 5;
}

.image-overlay {
background: transparent !important;
z-index: 10;
position: absolute;
left: 10%;
top: 3%;
width: 82%;
// width: 316px;
height: 190px;
border: 1px solid #5FE9D0;
border-radius: 20px;
}

.placement-text {
position: absolute;
margin-top: 30%;
margin-left: 1%;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
// color: #FFFFFF;
color: #000;
}

#capture {
position: absolute;
top: 275px;
left: calc(50% - 25px);
width: 50px;
height: 50px;
z-index: 99999;
}`