Почему происходит баг на мобильных устройствах с двухсторонней карточкой?

Question

[ForSureN1]

Добрый день. Имеется блок с "Портфолио" на котором по клику на монитор - телефон, будут меняться местами, все работает как нужно. Но как только мы откроем сайт с мобильного устройства или же через браузер используя инструмент "Отзывчивое устройство", то картинка с монитора, будет находиться под телефоном, аналогично с монитором.
Вот ссылка на сайт https://forsuren1.github.io/astedu/
Заранее благодарю

Comments

[Алексей Дубровин]

Сяп за дизайн. А в чём проблема так и не понял

[ForSureN1]

Алексей Дубровин, Так включите мобилку, и увидите

[ForSureN1]

Алексей Дубровин,
в режиме "отзывчивое устройство"

[Алексей Дубровин]

ForSureN1, Видимо в том браузере нет поддержки свойства
backface-visibility: hidden;
это экспериментальное свойство. Его вообще не должно быть в рабочих проектах

[ForSureN1]

Алексей Дубровин, Не совсем так, оно работает во всех браузерах, но оно скрывает только "монитор" и "телефон", а сама картинка "сайта" остается

[Алексей Дубровин]

ForSureN1, Тм есть преписка что оно может работать как хочет и меняться в зависимости от продвижении в спецификации.
Это означает:
1) Нет документации на это свойство и как оно работает в разных браузерах непонятно.
2) Если это в будующем не будет работать или изменится то сам виноват.
Для меня слово работает это когда везде работает. И нет очень важного союза "но".

[ForSureN1]

Алексей Дубровин, Получается придется использовать костыль, который я уже сделал ?
С небольшой задержкой добавляю класс который даёт display none этим изображениям

[Ilya Olovyannikov]

ForSureN1, добавляй opacity: 0

[ForSureN1]

Ilya Olovyannikov, понял, благодарю