Ionic 3: camera preview takePicture() is not respecting y-axis restrictions (but works fine along x-axis)

I want to open camera preview inside a containing div, which is a rectangle and take picture of whatever is visible inside the camera preview.

I used CameraPreview.startCamera method (see method below) to give startCamera exact rectangle to open camera. And it works fine and open camera in the div exactly as I wanted.

But when I take picture (see below: cameraPreview.takePicture ), I see that camera has captured the content outside of given rectangle along Y-axis .

Interestingly, along X-axis picture only has content which was inside the rectagle at the time of taking picture, as expected.

I am attaching my the relevent picture and the code below.

I am attaching two pictures and my code.

Any help will be greatly appreciated!

**Image 1 below: camera preview inside containing div.**

**Image 2 below: Actual image taken by camera preview and what was I actually expecting:**

I use the following code to open camera in preview and take the picture:

export class CameraService {
    constructor(private camera: Camera,
                private platform: Platform,
                private cameraPreview: CameraPreview) {


    takePicture(div) {
        return this.cameraPreview.takePicture();

    startCamera(div?) {

        let rectangle = div.getBoundingClientRect();
        let x = rectangle.x;
        let y = rectangle.y;
        let width = rectangle.width;
        let height = rectangle.height;
        let tapEnabled: any = false;
        let dragEnabled: any = false;
        // let toBack: any = true;
        let alpha = 1;
        let rect: any = {
            x: x || 250,
            y: y || 250,
            width: width || this.platform.width(),
            height: height || this.platform.height()


                toBack: true,
                previewDrag: true,