0

I've got a fixed header, that I want to move using translate3d to take advantage of hardware acceleration.

To do this I add a class, show-left-menu. However, on android it doesn't move at all. The weird thing is that the background colour does change? (android default browser)

header css:

#header{
position: fixed;
top:0;
left:0;
height:50px;
width:100%;
z-index:4;
-webkit-backface-visibility:hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

class added:

.show-left-menu{
background:#000;
-webkit-transform: translate3d(79%, 0, 0)!important;
transform: translate3d(79%, 0, 0)!important;
}

jsfiddle: http://jsfiddle.net/3Z28x/

my showLeftSidebar() is more complex but thats what affects the header

rpsep2
  • 3,061
  • 10
  • 39
  • 52
  • Why did you tag jquery? – Oussama el Bachiri Sep 06 '13 at 10:11
  • im adding the class with jquery – rpsep2 Sep 06 '13 at 10:12
  • Can you please provide a fiddle? In which browser did you test this? – insertusernamehere Sep 06 '13 at 10:13
  • Maybe javascript is enabled? – Oussama el Bachiri Sep 06 '13 at 10:13
  • I tested it on an Galaxy S4 with the default browser, with Chrome and Firefox. Looks good and the same in any of them. As a note: Instead of using `!important` qualify the CSS rule like: `#header.show-left-menu`. – insertusernamehere Sep 06 '13 at 10:48
  • really? definitely doesnt work on my HTC desire! weirdly it works fine if i just change the left value – rpsep2 Sep 06 '13 at 10:53
  • Yep. And you need at least the Android browser version 3 to support CSS 3D, see [Can I use CSS 3D tranform](http://caniuse.com/transforms3d). – insertusernamehere Sep 06 '13 at 10:56
  • the thing is, it does work if I change the header to position:absolute, its only if the header is fixed.. which is what I want! also, doesn't work if I change the header to position:absolute before adding the class using jquery.. – rpsep2 Sep 06 '13 at 10:58
  • This is a problem wider than Android devices. After doing research position fixed elements and translate3d don't play nicely together. See: http://stackoverflow.com/questions/15194313/webkit-css-transform3d-position-fixed-issue & http://www.markdebeer.com/blog/beware-translate3d-and-fixed-child-elements/ – egr103 Nov 04 '13 at 23:35

0 Answers0