На iPhone, когда я делаю вертикальное изображение, мой компонент vue работает неправильно

У меня проблемы с отображением недавно загруженных фотографий в форму. Если изображение было сделано телефоном, оно может иметь свойство exif, но браузер не обрабатывает это свойство, получается, что изображение может быть перевернуто или набок.

перевернутая картинка

Я решил эту проблему с помощью библиотеки exif-js. Написав (украв на каком-то сайте) компонент и потратив уйму времени, я добился того, что при загрузке и обработке картинка поворачивается в нужную сторону.

правая сторона изображения

Но в ходе теста мы выяснили, что на айфонах, если качать не с фотографий, а фотографировать вертикально вручную, то картинка вообще выходит за пределы div в левый нижний угол.

iphone неправильно изображение

После этого все остальные фотографии также отображаются некорректно. На андроид устройстве все нормально.

В этом img-tag: src изменяется динамически, и мне также нужно «преобразовать» динамически, поэтому мне нужно использовать метод updated(). Я знаю, что это плохой код, но...

использование:

<div class = "form-group">
    <div class = "row">
        <div class = "col-md-6 edit-activity-images">
            <auto-rotate><img class = "edit-activity-images-inner" alt = "activity"                                                 
          :src = "getUploadedImageBackground()||staticFile('images/img-place-holder.png')"
                                        ></auto-rotate>

Стиль

 edit-activity-images-inner{
     object-fit: cover;
     width: 100%;
     height: 100%;
 }

Компонент

<template>
    <div class = "holder">
        <slot></slot>
    </div>
 </template>

<script>
    import imagesLoaded from 'imagesloaded'
    import EXIF from 'exif-js'

    const rotateAngles = [
        {},
        {y: 0, z: 0},
        {y: 180, z: 0},
        {y: 0, z: 180},
        {y: 180, z: 180},
        {y: 180, z: -90},
        {y: 0, z: -90},
        {y: 180, z: 90},
        {y: 0, z: 90}
    ];

function getOrientation(el) {
    return new Promise(function (resolve) {
        imagesLoaded(el, function () {
            EXIF.getData(el, function () {
                const orientation = EXIF.getTag(this, 'Orientation');
                resolve(orientation);
            })
        })
    })
}

function getRotationAngle(newOrientation, oldOrientation) {
    const y = rotateAngles[newOrientation].y - rotateAngles[oldOrientation].y;
    let z = rotateAngles[newOrientation].z - rotateAngles[oldOrientation].z;
    if (y)
        z = z * -1;
    return { y, z }
}

const recently_added = {};
const havent_exif = {};

export default {
    name: "AutoRotate",
    updated() {
        const slot = this.$slots.default[0];
        if (slot.tag !== 'img') {
            console.error('Warning: slot should be an img tag.');
            return;
        }
        const holder = this.$el;
        const img = holder.childNodes[0];

        img.exifdata = undefined;
        if (recently_added[img.src]) {
            img.style['transform'] = recently_added[img.src];
            return
        } else if (havent_exif[img.src]) {
            img.style['transform'] = "translate(0px, 0px) rotateY(0deg) rotateZ(0deg)";
            return;
        }
        getOrientation(img).then(function (currentOrientation) {
            if (currentOrientation !== undefined) {
                const angle = getRotationAngle(1, currentOrientation);
                const transform = `rotateY(${angle.y}deg) rotateZ(${angle.z}deg)`;
                let translate = '';
                if (angle.z % 180 !== 0) {
                    const height = img.clientHeight;
                    const width = img.clientWidth;
                    translate = `translate(${(height - width) / 2}px, ${(width - height) / 2}px)`;
                    holder.style['width'] = `${height}px`;
                    holder.style['height'] = `${width}px`;
                }
                img.style['vertical-align'] = 'bottom';
                img.style['transform'] = translate + ' ' + transform;
                recently_added[img.src] = translate + ' ' + transform;
            } else {
                havent_exif[img.src] = true;
                if (!recently_added[img.src]) {
                    img.style['transform'] = "translate(0px, 0px) rotateY(0deg) rotateZ(0deg)";
                }
            }
        })

    }
}

<style scoped>
     .holder {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
 </style>

Ну, надеюсь, кто-то может мне помочь и написать, что я могу сделать...