Мобильная версияДаты расположены в центральном ряду, изображение — на первом, а некоторые легенды — на третьем.
Цель состоит в том, чтобы отображать изображения и легенды только тогда, когда их столбец даты находится в середине области просмотра — используя 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');
}
})
});
Заранее спасибо за помощь!>
Подробнее здесь: https://stackoverflow.com/questions/798 ... g-with-ios
