CODEWITHSUNDEEP
htmlcssmobile
James Hammond
James Hammond

Reputation: 40

CSS transform not working on mobile

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?

Upvotes: 2

Views: 7455

Answers (2)

Jaromír Šetek
Jaromír Šetek

Reputation: 478

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.

Upvotes: 4

Filipe Ferreira
Filipe Ferreira

Reputation: 330

You should use CSS Media queries instead of transform

Example for 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)
{ }

Then make your changes inside of it.

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

Upvotes: -1

Related Questions