Написала небольшой 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="✎">
<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="✎">
<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]);
});
});