Загрузка макета изображения отлично работает на Chrome, но не на моем iPhone - css flex box?

Question

Я пытаюсь загрузить изображение, на рабочем столе и в Chrome, оно работает, но на самом деле я изо всех сил пытаюсь заставить его работать на моем реальном мобильном телефоне.

мой код выглядит следующим образом:

<div id="holdingContainer">
                <div id="imageContainer">
                    <div id="mainImageArea">
                        <div id="mainImageArea2"></div>
                        <div id="imageCrop">
                        </div>
                    </div>
                </div>
                <form class="form-horizontal" action="" method="post" id="my_crop_form">
                    <div id="croppedImageContainer">
                        Profile image
                        <div id="amendedImage">

                            <img id="croppedImage" src="" alt="">
                        </div>
                    </div>
                </form>
            </div>

Мой CSS выглядит следующим образом:

/* ======================================
image crop section */

#mainImageArea{
  border: 2px solid black;
  width: 404px;
  height: 404px;
  position: relative;
  z-index: 0;
  display: none;
}


#amendedImage{
  border: 2px solid black;
  width: 100%;
  width: 204px;
  height: 204px;
  position: relative;
  z-index: 0;
}

#imageCrop {
  border: 2px dashed black;
  width: 204px;
  height: 204px;
  position: absolute;
  top: 75px;
  left: 75px;
  z-index: 2;
  display: none;
}

#imageCrop:hover {
  background-color: red;
  opacity: 0.2;
}


#profileImage {
  width: 100%;
  z-index: 0;
}

#imageContainer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

#holdingContainer {
  display: flex;
}
#croppedImageContainer {
  width: 100%;
  display: none;
  flex-direction: column; 
}

.cropSize:hover {
  cursor: pointer;
  color: black;
  background-color: orange;
}

@media screen and (max-width: 768px) {
  #mainImageArea {
    width: 95%;
    margin-right: 5px;
 }

  #imageContainer {
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;    
  }
}

И, наконец, мой jQuery выглядит следующим образом:

$("#my_form").submit(function (event) {
    event.preventDefault(); //prevent default action 
    var post_url = $(this).attr("action"); //get form action url
    var request_method = $(this).attr("method"); //get form GET/POST method
    var form_data = new FormData(this); //Creates new FormData object
    // console.log($(this).children());
    $('#mainImageArea2').empty();
    $.ajax({
        url: post_url,
        type: request_method,
        data: form_data,
        contentType: false,
        cache: false,
        processData: false
    }).done(function (response) { //
        $('#mainImageArea2').empty();
        let img = `<img id="profileImage" src="${response}" alt="">`
        $(img).appendTo('#mainImageArea2');
        setTimeout(function () {
            $('#mainImageArea').css('display', 'block');
            $('#imageCrop').css('display', 'block');
            $('#croppedImageContainer').css('display', 'flex');
            let p = $('#profileImage').position();
            let w = $('#profileImage').width();
            let h = $('#profileImage').height();
            $('#mainImageArea').css('width', w).css('height', h);
            if ($('#imageCrop').height() > $('#profileImage').height()) {
                let newHeight = $('#profileImage').height() * .9;
                $('#imageCrop').css('width', newHeight).css('height', newHeight);
            }
            if ($('#imageCrop').width() > $('#profileImage').width()) {
                let newHeight = $('#profileImage').width() * .9;
                $('#imageCrop').css('width', newHeight).css('height', newHeight);
            }
            changePositionImageCropper();
            cropImageNow();
        }, 500)
    });

});

По сути, первое изображение - это то, что я вижуна Chrome на моем рабочем столе в моей среде разработки.В этом случае я просматриваю его как iPhone 5 / 5s.

Второе изображение на самом iPhone, а обрезанное изображение лежит поверх изображения, которое предполагается выбрать.

IЯ уверен, что это что-то базовое, но очень расстраивает, когда он работает, как мечта, в среде разработчика, но не на реальном устройстве.

Идея состоит в том, что пользователь загружает изображение, а затем может разбить его икадрирует изображение в меньшую область.