CSS转换不适用于手机 [英] CSS transform not working on mobile

问题描述

  .cart。
 
我有一个隐藏的购物车和菜单，它们是用CSS变换放置在屏幕外的固定div。 -slide {
 position：fixed; 
 top：0; 
 bottom：0; 
 overflow-y：scroll; 
 overflow-x：hidden; 
 padding：20px 40px; 
 right：0; 
宽度：40％; 
 transform：translate3D（100％，0，0）; 
} 
 .cart-open {
 .cart-slide {
 transform：translate3D（0，0，0）; 
 
 
 code 
 $ b $ p 
 $ b 
它们可以在桌面和谷歌设备模式下正常工作，但是当在移动设备上加载时，转换不起作用，从而使div永久地覆盖屏幕。有没有办法解决这个问题？
解决方案
我认为转换是可以的，但它需要厂商前缀。尝试添加： 
 
 
  -ms-transform：translate3d（...）; 
 -webkit-transform：translate3d（...）; 
 transform：translate3d（...）; 
  
将其应用于所有媒体查询和所有状态（隐藏/显示） p> 
I have a hidden cart and menu, which are fixed divs positioned with CSS transforms to be off screen.
.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);
    }
}
They work fine on desktop and on google device mode, but when loaded on a mobile the transforms don't work which leaves the div permanently covering the screen. Is there a way to fix this?
解决方案
I think the transform is okay, but it needs vendor prefixes. Try adding:
-ms-transform: translate3d(...);
-webkit-transform: translate3d(...);
transform: translate3d(...);
Apply this to all media queries and all states (hidden/shown) and it should work.


                        
这篇关于CSS转换不适用于手机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！