search

portalsftdev / dm

0 stars 1 forks source link

Отсутствующая картинка в карточке товара на Apple iPhone #44

Closed portalsftdev closed 6 years ago

portalsftdev commented 6 years ago

В карточке товара отсутствует картинка при просмотре через Apple iPhone

portalsftdev commented 6 years ago

Проблема не воспроизводится ни в Firefox при различных разрешениях экрана, ни в режиме эмуляции iPhone в браузере Safari. Есть ли проблема на Apple iPad и в браузерах на Android?

Движок никак не подразделяет выдачу HTML кода в зависимости от устройств или браузеров, т.е. вывод на все устройства и браузеры идет один и тот же. Может быть, картинка отсутствует просто потому что ее нет в БД?

portalsftdev commented 6 years ago

Да, действительно. При просмотре через мобильные устройства в некоторых карточках входных или межкомнатных дверей картинка отсутствует. Причем после зума (двойного нажатия на область картинки) она появляется. Также она появляется если обновить страницу или зайти в эту же карточку товара еще раз.

Проблема связана с эффектом переключения картинки, потому что если у контейнеров картинок убрать CSS-классы front и back, то все работает как ожидается.

Картинки появляются, если для transform-origin задать значение flat:

.card-wrapper .card-rotating {
    -moz-transform-style: flat;
    -webkit-transform-style: flat;
    transform-style: flat;
}

Однако в этом случае после нажатия кнопки "Другая сторона" не видно вторую картинку (появляется после обновления страницы или двойного нажатия на область картинки).

Кроме того, transform-origin: flat задает поворот картинки в плоскости в десктопных браузерах (по крайней мере в Firefox), но не в мобильных (по крайней мере в Safari и Google Chrome на iPad). В этом случае в мобильных браузерах при transform-origin: flat работает также, как и при transform-origin: preserve-3d.

Использование кода из мануала не дает ожидаемого результата, проблема остается.