Преобразование CSS, не работающее на мобильном телефоне

Question

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

.cart-slide{ 
    position:fixed; 
    top:0; 
    bottom:0; 
    overflow-y:scroll; 
    overflow-x:hidden; 
    padding:20px 40px; 
    right:0; 
    width:40%; 
    transform:translate3D(100%, 0, 0); 
} 
.cart-open{ 
    .cart-slide{ 
    transform:translate3D(0, 0, 0); 
    } 
} 

Они работают отлично на рабочем столе и в режиме устройства Google, но при загрузке на мобильный трансформанты не работают, которая оставляет ДИВ постоянно покрывать экран. Есть ли способ исправить это?

Answer 1

Вы должны использовать CSS Media Queries вместо преобразования

Пример для Iphone 6:

@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 2) 
{ } 

@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2) 
{ } 

Затем внесите изменения внутри него.

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

Я думаю, что преобразование в порядке, но она нуждается в префиксы. Попробуйте добавить:

-ms-transform: translate3d(...); 
-webkit-transform: translate3d(...); 
transform: translate3d(...); 

Применить это ко всем медиа-запросам и всем состояниям (скрытым/показанным), и оно должно работать.