0

Написала небольшой Todo list. На компе работает норм, на андроид норм. На айфоне вкладка карты сыпется верстка. Там вращающиеся карточки, на айфоне одновременно видно и переднюю и заднюю часть карты, когда начинаю писать что либо, то записывает не в передний, а в задний инпут и отображает надпись зеркально. Не срабатывает функция добавления картинки. Может кто-то сталкивался с подобным?

<div class="col">
                    <div class="card style-element">
                        <div class="front">
                            <form class="upload-container" method="POST" action="#" data-img='0'>
                                <img class="upload-image" src="./img/images.png">
                                <div>
                                    <input id="file-input-1" class="file-input" type="file" name="file" multiple>
                                    <label for="file-input-1">Выберите файл</label>
                                    <span>или перетащите его сюда</span>
                                </div>
                            </form>
                            <div class="card-body">
                                <input class="card-text" placeholder="&#9998">
                                <button class="btn-card-text" data-index="0">ok</button>
                                <p class="out-front"></p>
                                <div class="img-position">
                                    <img src="./img/down.png" alt="#" class="download" data-down="0">
                                    <img src="./img/repost.png" alt="#" class="repost">
                                    <img src="./img/delete.png" alt="#" class="delete-card" data-del="0">
                                    <img src="./img/arrow.png" alt="arrow" class="arrow-card">
                                </div>
                            </div>
                        </div>
                        <div class="back">
                            <input type="text" class="back-text" placeholder="&#9998">
                            <button class="btn-card-back" data-back="0">ok</button>
                            <p class="out"></p>
                            <img src="./img/delete.png" alt="#" class="delete-back" data-delBack="0">
                            <img src="./img/arrow.png" alt="arrow" class="arrow-card back-arrow">
                        </div>
                    </div>
                </div>

.front{
    max-width: 100%;
    min-width: 100%;
    height: auto;
   
}
.front, .back{
    backface-visibility: hidden;
        transition: 2s;
}
.back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 42%;
    left: 0;
}

.front-rotate  {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.back-rotate{
    transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
}
.upload-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 360px;
    height: 300px;
    outline: 2px dashed #5d5d5d;
    outline-offset: -12px;
    background-color: #e0f2f7;
    font-family: 'Segoe UI';
    color: #1f3c44;
}

.upload-image {
    width: 40%;
    margin-bottom: 20px;
    user-select: none;
}
.upload-container label {
    font-weight: bold;
}

.upload-container label:hover {
    cursor: pointer;
    text-decoration: underline;
}
.upload-container div {
    position: relative;
    z-index: 10;
}

.upload-container input[type=file] {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    position: absolute;
    z-index: -10;
}
.upload-container input[type=file]:focus + label {  
    outline: 1px solid #0078d7;
    outline: -webkit-focus-ring-color auto 5px;
}
.img-new{
    width: 360px;
    height: 300px;
    object-fit: cover;
}
.img-position img{   
    width: 35px;
    height: 35px;
    margin: 5px 30px 5px 15px;
}
.card-text, .back-text{
    width: 88%;
    border: none;
    border-bottom: 1px solid black;
}
.btn-card-text, .btn-card-back{
    border-radius: 5px;
    border: 1px solid #0d6efd;
    background:#f8f9fa;
}
.back-arrow{
    width: 35px;
    height: 35px;
    float: right;
    margin: 35% 5% 0 0;
}
.out-front{   
    text-align: center;
    font-size: 24px;
    font-weight: 700;
}
.out{
    
    text-align: center;
    font-size: 32px;
    font-weight: 700;
}
.delete-back{
    width: 35px;
    height: 35px;
    float: left;
    margin: 35% 5% 0 5%;
}

// download file input
document.querySelectorAll('label').forEach(d => {

    d.addEventListener('click', function () {
        d.parentElement.querySelector('input').focus();
    });
});


document.querySelectorAll('.file-input').forEach(d => {

    d.addEventListener('change', function () {
        if (document.querySelector('#language').value == 'rus') {
            alert('Если вы хотите распечатать карточку в PDF формате ваша картинка должна быть следующих форматов: PNG, JPG, SVG.');
        };
        if (document.querySelector('#language').value == 'eng') {
            alert('If you want to print the card in PDF format, your picture must be in the following formats: PNG, JPG, SVG.');
        };
        if (document.querySelector('#language').value == 'ukr') {
            alert('Якщо ви хочете роздрукувати картку в PDF форматі ваша картинка повинна бути наступних форматах: PNG, JPG, SVG.');
        };
        let form_file = this.closest('.upload-container');
        const fileList = d.files;
        const reader = new FileReader();
        reader.onload = function () {
            const img = form_file.querySelector('.upload-image');

            if (img) {
                const indexImg = +form_file.getAttribute('data-img');
                if (!inputValues[indexImg]) {
                    inputValues[indexImg] = { text: '', img: reader.result };
                }
                else {
                    inputValues[indexImg].img = reader.result;
                }

                localStorage.setItem('values', JSON.stringify(inputValues));
                img.setAttribute('src', reader.result);
            }
            img.classList.remove('upload-image');
            img.classList.add('img-new');
            form_file.querySelector('.upload-container label').classList.add('hide');
            form_file.querySelector('.upload-container span').classList.add('hide');
        }
        reader.readAsDataURL(fileList[0]);
    });
});
1
  • По верстке я нашла, на айфоне почему то не работает backface-visibility: hidden; хотя на сайте Can I use, указано, что это свойство поддерживается браузером сафари и хромом, на айфоне. Но я не знаю, какой костыль применить, чтобы на афоне это заработало. А почему не работает функция добавления картинок, я понять так и не смогла
    – Юлия
    26 апр 2021 в 8:13

1 ответ 1

0

С проблемой верстки разобралась таким образом:

.style-element{
    border: 1px solid #0d6efd;
    perspective: 1000px;
    -webkit-perspective: 1000;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

добавила родительскому элементу -webkit-backface-visibility: hidden;, так же расставила везде префиксы -webkit.

.front, .back{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
        transition: 2s;
}

Вот так сработало на айфоне корректно. С добавление картинок разобралась частично, если сфотографировать, то фото добавляется отлично, если загружать из галереи, фото не грузится. Этот баг есть только на айфнах. Дальше буду разбираться. Если выясню, напишу сюда.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.