Переход непрозрачности CSS не работает с iOS ⇐ IOS

[Anonymous]

Я публикую это, потому что исследовал эту проблему более двух дней и не смог найти в последнее время четкого ответа – только то, что кажется хаком.
Вот проблема, которую, что еще хуже, я не смог воспроизвести с помощью js fiddle или codepen.
У меня есть сетка с тремя строками и более чем 20 столбцами.
Я хочу отображать содержимое только одного столбца за раз, и для этого я использую простой js-скрипт, который добавляет/удаляет классы, управляющие свойством непрозрачности элементов в сетке на основе взаимодействия с пользователем.
Чтобы все было гладко, я применяю переход к этому свойству непрозрачности.
Это отлично работало на моем компьютере (chrome/firefox), а также на старом телефоне Android (chrome/firefox).
Но он был сломан на моем iPhone (safari/chrome/firefox): элементы, которые должны были иметь «opacity: 0», оставались видимыми на экране.
Появление/исчезновение элементов будет работать нормально на всех платформах только в том случае, если я удалю переходы. Но мне очень хотелось какого-то плавного появления/затухания…
Не будучи профессионалом, у меня очень ограниченные возможности для тестирования – поэтому я почти разозлился, пытаясь выяснить, что происходит с переходами на этом проклятом телефоне.
В конце концов, я получил в свои руки настольный Mac и наконец смог проверить свою веб-страницу в Safari: к моему большому удивлению, не было отмечено ни одной проблемы, а элементы, все еще прекрасно видимые в своих столбцах, действительно имели «opacity: 0» в инспекторе.
После нескольких часов просмотра stackoverflow и других форумов я не смог найти ни одного подходящего сообщения по этой проблеме. Ближайшие ответы касались наведения, анимации и 3Dpreserve, и большинству из них было десять лет, и предлагалось использовать префикс --webkit.
Однако один из них предлагал использовать «backface-visibility: Hidden;». – но без дополнительных объяснений.
В крайнем случае, я решил применить это решение к моему случаю и – та-да! Это устранило проблему, и теперь мои элементы плавно появляются и исчезают в сетке на iOS.
Но я не могу не задаться вопросом: wtf?
Почему backface-visibility может что-то изменить в коде, который не переворачивается, а просто меняет непрозрачность div?
Кто-нибудь знает об этой проблеме? Или почему iOS ведет себя так при переходе?
Моя проблема решена, но мне бы очень хотелось понять, почему…..
Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/798 ... g-with-ios