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

Question

[ForSureN1]

Добрый день. Имеется блок, в котором есть двухсторонний блок, на одной стороне монитор, на второй телефон.


Данные перевороты сделаны при помощи rotate3D

.portfolio__monitor, .portfolio__phone {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s;
    backface-visibility: hidden;
    cursor: pointer;
}
.portfolio__phone.rotate {
    transform: rotate3D(0, 1, 0, 
360deg);
}
.portfolio__phone {
    transform: rotate3D(0, 1, 0, 
180deg);
}

Все работает как нужно, но как только я включаю режим в браузере "Отзывчивого устройства", происходит вот такая беда, и не могу понять почему.


Вопрос в том, баг в коде ? Или все же баг данного инструмента, на мобилке не тестил еще, так как локально лежит пока что, просто хочу заранее знать, нужно ли это фиксить, или нет.
Заранее благодарю

Comments

[Ankhena]

на мобилке не тестил еще, так как локально лежит пока что

Так потестите. Благо и галп и вебпак умеют 0.0.0.0
А вот когда не получится, делайте либо песочницу, в которой можно пощупать проблему либо ссылку на опубликованную страницу (на ней можно оставить только проблему)

[ForSureN1]

Ankhena, К сожалению баг имеется на мобилках, потестил, не знаете, что может провоцировать это ?

[ForSureN1]

Ankhena, Вот ссылка https://forsuren1.github.io/astedu/

[ForSureN1]

Ankhena, Я в принципе решил это абстрактным способом, не думаю что он правилен, но для дальнейшего выяснения думаю что пока подойдет, просто с небольшой задержкой по клику добавляю/удаляю класс у изображения который даёт display: none

[Ankhena]

ForSureN1,
Ага, посмотрела, действительно не прячется.

backface-visibility это экспериментальная технология, вести себя может как угодно.

Я бы, наверное, начала не display менять, а opacity. Если тормозов не будет.

[ForSureN1]

Ankhena, Да уже подсказали что лучше opacity сделать, так и сделал