Мобильная версияДаты расположены в центральном ряду, изображение — на первом, а некоторые легенды — на третьем.
Цель состоит в том, чтобы отображать изображения и легенды только тогда, когда их столбец даты находится в середине области просмотра — используя JavaScript для изменения непрозрачности элементов.
Возможно, это не лучший подход, но для новичка и будучи дилетантом, я все равно был счастлив и горд тем, что написанный мною код работал так, как задумано. Ну, не совсем...
Он отлично работает на Windows и Android.
Но не на iOS: элементы, которые должны стать «невидимыми» после прокрутки, остаются видимыми на экране, несмотря на то, что их свойство непрозрачности установлено на ноль (по крайней мере, это то, что я вижу в окне инспектора Safari).
Похоже, проблема связана с переходами, примененными к свойству непрозрачности.
Если я их подавил при переходах элементы появляются/исчезают, как ожидалось, даже в iOS – но не с желаемым эффектом появления/исчезновения.
После нескольких часов просмотра stackoverflow и других форумов я не смог найти ни одного подходящего сообщения по этой проблеме. Ближайшие ответы касались наведения, анимации и 3Dpreserve, и большинству из них было десять лет, и предлагалось использовать префикс --webkit. Однако один из них предложил применить «backface-visibility: скрытый»; о динамических элементах – но без дополнительных объяснений.
В крайнем случае, я решил попытаться применить это решение к моему случаю и – та-да! Это устранило проблему, и теперь мои элементы плавно появляются и исчезают в сетке на iOS.
Но я не могу не спросить себя: что за фигня? Зачем backface-visibility что-то менять в коде, который не делает переворотов, а просто меняет непрозрачность div? Кто-нибудь знает об этой проблеме? Или почему iOS ведет себя так с переходами?
Моя проблема решена, но мне бы хотелось понять, почему…..
Что еще хуже, мне не удалось воспроизвести проблему в упрощенном коде: каждый раз, когда я создаю простую сетку с тем же прослушивателем событий js для отображения содержимого, когда ячейка достигает середины области просмотра — все работает нормально на Windows/android/iOS.
Итак, вот полная вещь:
страницы github
Я подозреваю, что это как-то связано с ошибкой в моем прослушивателе событий:
const timelineWrapper = document.querySelector('.timeline');
const tiles = document.querySelectorAll('button.tl_year');
timelineWrapper.addEventListener('scroll', () => {
const tileWidth = tiles[0].offsetWidth;
tiles.forEach(tile => {
const index = Array.from(tiles).indexOf(tile);
const posTile = (index) * tileWidth;
const endTile = posTile + tileWidth;
const imgSelect = document.querySelector('img[data-year="' + tile.id + '"]');
const legendSelect = document.querySelector('.tl_legende[data-year="' + tile.id + '"]');
const credSelect = document.querySelector('.cred[data-cred="' + tile.id + '"]');
if((timelineWrapper.scrollLeft >= posTile - 10) && (timelineWrapper.scrollLeft < endTile - 10)) {
tile.classList.add('date_active');
imgSelect.classList.add('tl_LegImgVisible');
imgSelect.setAttribute('aria-hidden', false);
legendSelect.classList.add('tl_LegImgVisible');
legendSelect.removeAttribute('inert');
credSelect.classList.add('credShow');
}
else {
tile.classList.remove('date_active');
imgSelect.classList.remove('tl_LegImgVisible');
imgSelect.setAttribute('aria-hidden', true);
legendSelect.classList.remove('tl_LegImgVisible');
legendSelect.setAttribute('inert', true);
credSelect.classList.remove('credShow');
}
})
});
Но, возможно, дело в чем-то другом – я не знаю: я заблудился, но очень хочу выяснить и узнать, что я сделал не так…
Заранее спасибо за вашу помощь!
РЕДАКТИРОВАТЬ
Вот образец HTML:
1951
Création de la CECA
© M. Baronnet / CC BY-SA 4.0
И пример CSS для элементов с изменяющейся непрозрачностью:
#partChrono img {
height: 90%;
width: auto;
grid-row: 1 / 2;
place-self: center;
opacity: 0;
transition: opacity 1s ease-in-out;
/* backface-visibility: hidden; */
}
.tl_legende {
width: 100%;
grid-row: 3 / 4;
padding-top: 5vmin;
display: flex;
flex-direction: column;
align-items: center;
text-wrap: nowrap;
opacity: 0;
/* backface-visibility: hidden; */
transition: opacity 1s ease-in-out;
}
.tl_LegImgVisible, #partChrono img.tl_LegImgVisible {
opacity: 1;
}
.credits_photo {
display: flex;
align-self: flex-end;
}
.cred {
font-size: var(--fs--2);
font-style: italic;
padding: 1vmin;
display: none
}
.credShow {
display: inline;
}
Подробнее здесь: https://stackoverflow.com/questions/798 ... g-with-ios
