Cropper JS dont work correctly in mobile browsers. HELP PLS

Question

Cropper JS 1.15.3 the latest version.

In PC all work normally, but on every mobile browser, there is one problem - my cropper sometimes works, sometimes dont.

In lucky day it can works two or three times in a row, in bad day it can dont work at all...

I tried to resize pictures to 1023px. (on server and without)

I cant find the solution to my problem.

Im working on a project about 3 months and cant handle this problem.

import { el, setChildren } from 'redom';
import { createCardApp } from './card';
import savePhoto from '../assets/images/savePhoto.svg';
import closePhoto from '../assets/images/closePhoto.svg';
import rechoosePhoto from '../assets/images/rechoosePhoto.svg';
import Cropper from 'cropperjs';
import { updateCard, updateUser } from './API';
import { barLine } from './barLine';

let cropper = null;
console.log(cropper);

export function createChangeUserDataPage(obj, PHOTO, AVATAR_DEFAULT) {
  const header = el(
    'header.header.sm-offset',
    el('div.bar'),
    el('div.container.header__container', [
      el('div.message__btn-wrap', el('button.js-backBtn.btn.message__btn')),
      el('h2.header__title-comp', 'Личные данные'),
    ])
  );

  const main = el(
    'main.main',
    el('div.container', [
      el('div.avatar.hidden-avatar', [
        el('canvas.noborder', {
          id: 'cropped-image',
          width: '500',
          height: '500',
        }),
      ]),
      el('div.avatar-photo-container', [
        el('div.card-ph', [
          el(
            'div.card-front',
            PHOTO === null ? `${AVATAR_DEFAULT}` : el('img', { src: PHOTO })
          ),
        ]),
      ]),
      el('button.footer__btn.btn.active-btn.avatar-btn', 'Изменить фото'),
      el('form.data.main-comp', [
        el('label.inp-wrap', [
          el('input.data__input.input', { type: 'text' }),
          el('span.inp-placeholder', 'Фамилия'),
        ]),
        el('label.inp-wrap', [
          el('input.data__input.input', { type: 'text' }),
          el('span.inp-placeholder', 'Имя'),
        ]),
        el('label.inp-wrap', [
          el('input.data__input.input', { type: 'text' }),
          el('span.inp-placeholder', 'Отчество'),
        ]),
        el('label.inp-wrap', [
          el('input.data__input.input', { type: 'text' }),
          el('span.inp-placeholder', 'Ваша должность'),
        ]),
        el('label.inp-wrap', [
          el('input.data__input.input', { type: 'text' }),
          el('span.inp-placeholder', 'Мобильный телефон'),
        ]),
        el('label.inp-wrap', [
          el('input.data__input.input', { type: 'text' }),
          el('span.inp-placeholder', 'Email'),
        ]),
        el('label.inp-wrap', [
          el('input.data__input.input', { type: 'text' }),
          el('span.inp-placeholder', 'Домашний телефон'),
        ]),
        el('label.inp-wrap', [
          el('input.data__input.input', { type: 'text' }),
          el('span.inp-placeholder', 'Личный сайт'),
        ]),
      ]),
    ])
  );

  const footer = el(
    'footer.footer',
    el('div.container', el('button.footer__btn.btn.active-btn', 'Сохранить'))
  );

  const modal = el('div.blur', [
    el(
      'div.close-photo-container',
      el('button.btn', el('img', { src: closePhoto }))
    ),
    el('.cropper__size.circle', [el('img#selected-image')]),
    el('div.buttons-container', [
      el(
        'button.btn.rechoose-btn',
        el('img', { src: rechoosePhoto }),
        'Выбрать другое'
      ),
      el('button.btn.cropper__btn', el('img', { src: savePhoto })),
    ]),
  ]);

  setChildren(document.body, [header, main, footer, modal]);

  returnPage();
  activateInputs();
  fillInputs(obj);
  closePhotoChoose();
  chooseAnotherPhoto();
  crop();
  validateInputs();
  emailInput();
}

function returnPage() {
  const BTN = document.querySelector('.js-backBtn');

  BTN.addEventListener('click', () => {
    createCardApp();
  });
}

function activateInputs() {
  const INPUTS = document.querySelectorAll('.data__input');

  INPUTS.forEach((e) => {
    const SPAN = e.parentNode.children[1];
    e.addEventListener('input', () => {
      SPAN.classList.add('_active');
      if (e.value.length === 0) {
        SPAN.classList.remove('_active');
      }
    });
  });
}

function fillInputs(obj) {
  const INPUTS = document.querySelectorAll('.data__input');

  INPUTS[0].value = obj.Surname;
  INPUTS[0].parentNode.children[1].classList.add('_active');
  INPUTS[1].value = obj.FirstName;
  INPUTS[1].parentNode.children[1].classList.add('_active');
  INPUTS[4].value = obj.Phone;
  INPUTS[4].parentNode.children[1].classList.add('_active');
  INPUTS[5].value = obj.Email;
  INPUTS[5].parentNode.children[1].classList.add('_active');

  if (obj.LastName) {
    INPUTS[2].value = obj.LastName;
    INPUTS[2].parentNode.children[1].classList.add('_active');
  }
  if (obj.JobTitle) {
    INPUTS[3].value = obj.JobTitle;
    INPUTS[3].parentNode.children[1].classList.add('_active');
  }
  if (obj.HomePhone) {
    INPUTS[6].value = obj.HomePhone;
    INPUTS[6].parentNode.children[1].classList.add('_active');
  }
  if (obj.Site) {
    INPUTS[7].value = obj.Site;
    INPUTS[7].parentNode.children[1].classList.add('_active');
  }
}

function closePhotoChoose() {
  const BTN = document.querySelector('.close-photo-container');

  BTN.addEventListener('click', () => {
    document.querySelector('.blur').style.display = 'none';
    document.body.style.overflow = 'visible';
  });
}

function choosePhoto() {
  let selectedImage = document.getElementById('selected-image');
  let croppedCanvas = document.getElementById('cropped-image');

  if (croppedCanvas.classList.contains('fullfilled')) {
    croppedCanvas.classList.remove('fullfilled');
  }
  croppedCanvas.classList.remove('null');
  let fileInput = document.createElement('input');
  fileInput.type = 'file';
  fileInput.accept = 'image/*';

  fileInput.addEventListener('change', function (e) {
    if (e.target.files.length > 0) {
      document.querySelector('.blur').style.display = 'block';
      document.body.style.overflow = 'hidden';

      let file = e.target.files[0];
      let reader = new FileReader();

      reader.onload = function (event) {
        let imageUrl = event.target.result;
        selectedImage.src = imageUrl;
        console.log('l');
        if (cropper) {
          cropper.replace(imageUrl);
        } else {
          cropper = new Cropper(selectedImage, {
            cropBoxMovable: false,
            aspectRatio: 1,
            autoCropArea: 1,
            viewMode: 2,
            cropBoxResizable: false,
            rotatable: false,
            zoomOnTouch: true,
            zoomOnWheel: true,
            minZoom: 0.1,
            maxZoom: 1,
            dragMode: 'move',
            checkOrientation: false,
          });
        }
      };

      reader.onerror = function (event) {
        alert(event.target.error);
        console.error('Ошибка чтения файла:', event.target.error);
      };

      reader.readAsDataURL(file);
    } else {
      alert('Неверный файл');
    }
  });

  fileInput.click();
  fileInput.addEventListener('change', (e) => {
    if (e.target.files.length > 0) {
      document.querySelector('.blur').style.display = 'block';
      document.body.style.overflow = 'hidden';
    } else {
      alert('bad');
      return;
    }
  });
}

function chooseAnotherPhoto() {
  const BTN = document.querySelector('.rechoose-btn');
  const MODAL = document.querySelector('.blur');

  BTN.addEventListener('click', () => {
    MODAL.style.display = 'none';
    choosePhoto();
  });
}

function crop() {
  let croppedCanvas = document.getElementById('cropped-image');
  const btn = document.querySelector('.cropper__btn');
  const chooseBtn = document.querySelector('.avatar-btn');
  const NEXT_BUTTON = document.querySelectorAll('.footer__btn')[1];

  chooseBtn.addEventListener('click', function () {
    choosePhoto();
  });

  btn.addEventListener('click', function () {
    if (cropper !== null && !croppedCanvas.classList.contains('fullfilled')) {
      let croppedImage = cropper.getCroppedCanvas();
      let croppedContext = croppedCanvas.getContext('2d');
      croppedContext.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
      croppedContext.drawImage(
        croppedImage,
        0,
        0,
        croppedCanvas.width,
        croppedCanvas.height
      );
      // document.querySelector('.cropper-container').remove();
      croppedCanvas.classList.add('fullfilled');

      document.querySelector('.blur').style.display = 'none';
      document.body.style.overflow = 'visible';
      document.querySelector('.avatar').style.display = 'flex';
      document.querySelector('.avatar-photo-container').style.display = 'none';
    }
  });

  barLine(NEXT_BUTTON);

  NEXT_BUTTON.addEventListener('click', () => {
    const INPUTS = document.querySelectorAll('.data__input');
    if (INPUTS[0].value.length < 2) {
      INPUTS[0].classList.remove('_cor');
      INPUTS[0].classList.add('_del');
    } else {
      INPUTS[0].classList.remove('_del');
      INPUTS[0].classList.add('_cor');
    }
    if (INPUTS[1].value.length < 2) {
      INPUTS[1].classList.remove('_cor');
      INPUTS[1].classList.add('_del');
    } else {
      INPUTS[1].classList.remove('_del');
      INPUTS[1].classList.add('_cor');
    }
    if (emailValidation(INPUTS[5].value)) {
      INPUTS[5].classList.remove('_del');
      INPUTS[5].classList.add('_cor');
    } else {
      INPUTS[5].classList.remove('_cor');
      INPUTS[5].classList.add('_del');
    }
    if (
      (INPUTS[4].value.length > 10 &&
        /^[0-9\s]+$/g.test(INPUTS[4].value.trim()) &&
        INPUTS[4].value.length < 12) ||
      INPUTS[4].value.length === 0
    ) {
      INPUTS[4].classList.remove('_del');
      INPUTS[4].classList.add('_cor');
    } else {
      INPUTS[4].classList.remove('_cor');
      INPUTS[4].classList.add('_del');
    }

    let count = 0;

    INPUTS.forEach(async (e) => {
      if (e.classList.contains('_cor')) {
        count += 1;
        console.log(count);
        if (count < 4) {
          return;
        } else {
          const img = document.getElementById('cropped-image');
          const fullImg = document.getElementById('selected-image');

          window.scrollTo({
            top: 0,
            behavior: 'smooth',
          });

          if (img.classList.contains('fullfilled')) {
            const data = {
              surName: INPUTS[0].value.trim(),
              name: INPUTS[1].value.trim(),
              lastName: INPUTS[2].value.trim(),
              phone: INPUTS[4].value.trim(),
              photo: fullImg.src !== '' ? fullImg.src : null,
              crop: img.toDataURL('image/png'),
            };
            const dataSec = {
              CID: localStorage.getItem('CID'),
              photo: fullImg.src !== '' ? fullImg.src : null,
              crop: img.toDataURL('image/png'),
              email: INPUTS[5].value.trim(),
              surName: INPUTS[0].value.trim(),
              name: INPUTS[1].value.trim(),
              lastName: INPUTS[2].value.trim(),
              phone: INPUTS[4].value.trim(),
              homePhone: INPUTS[6].value.trim(),
              site: INPUTS[7].value.trim(),
              job: INPUTS[3].value.trim(),
            };
            const update1 = updateCard(dataSec);
            const update = updateUser(data);
            const [l, k] = await Promise.all([update1, update]);
            console.log(l, k);
          } else {
            const data = {
              surName: INPUTS[0].value.trim(),
              name: INPUTS[1].value.trim(),
              lastName: INPUTS[2].value.trim(),
              phone: INPUTS[4].value.trim(),
            };
            const dataSec = {
              CID: localStorage.getItem('CID'),
              email: INPUTS[5].value.trim(),
              surName: INPUTS[0].value.trim(),
              name: INPUTS[1].value.trim(),
              lastName: INPUTS[2].value.trim(),
              phone: INPUTS[4].value.trim(),
              homePhone: INPUTS[6].value.trim(),
              site: INPUTS[7].value.trim(),
              job: INPUTS[3].value.trim(),
            };
            const update1 = updateCard(dataSec);
            const update = updateUser(data);
            const [l, k] = await Promise.all([update1, update]);
            console.log(l, k);
          }
          createCardApp();
          cropper = null;
        }
      }
    });
  });
}

function validateInputs() {
  const INPUTS = document.querySelectorAll('.data__input');

  INPUTS.forEach((e) => {
    if (e !== INPUTS[4] && e !== INPUTS[5]) {
      e.addEventListener('input', (e) => {
        e.target.style.borderColor = 'rgba(41, 98, 255, 1)';
        if (e.target.value.length === 0) {
          e.target.style.borderColor = '#b0bec5';
        }
      });
    }
  });

  INPUTS[0].addEventListener('input', (e) => {
    if (e.target.value.length > 2) {
      e.target.classList.remove('_del');
      e.target.classList.add('_cor');
    } else {
      e.target.classList.remove('_cor');
      e.target.classList.add('_del');
    }
  });

  INPUTS[1].addEventListener('input', (e) => {
    if (e.target.value.length > 2) {
      e.target.classList.remove('_del');
      e.target.classList.add('_cor');
    } else {
      e.target.classList.remove('_cor');
      e.target.classList.add('_del');
    }
  });

  INPUTS[4].addEventListener('input', (e) => {
    if (
      e.target.value.length > 10 &&
      /^[0-9\s]+$/g.test(e.target.value.trim()) &&
      e.target.value.length < 12
    ) {
      e.target.classList.remove('_del');
      e.target.classList.add('_cor');
    } else {
      e.target.classList.remove('_cor');
      e.target.classList.add('_del');
    }
  });
}

function emailInput() {
  const email = document.querySelectorAll('.data__input')[5];

  email.addEventListener('input', () => {
    if (emailValidation(email.value.trim())) {
      email.classList.remove('_del');
      email.classList.add('_cor');
    } else {
      email.classList.remove('_cor');
      email.classList.add('_del');
    }
  });
}

function emailValidation(value) {
  const EMAIL_REGEXP = /^([a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+)$/;

  return EMAIL_REGEXP.test(value);
}