Search code examples
cssgoogle-chromefirefoxtranslate3d

translate3d on html doesn't affect background-position on body in Firefox

When I do:

-webkit-transform: translate3d(0, 35px, 0px) !important;
transform: translate3d(0, 35px, 0px) !important;

on the HTML tag.

Chrome pushes everything down (including the body background with a position), but Firefox doesn't do so.

Example: http://jsfiddle.net/6VTAn/ (Open in Chrome and Firefox to notice the difference)

Is there an additional style/property that I can apply to the HTML tag that makes it exhibit the same behavior as Chrome.

I'm looking for a standard approach to push the page down across all websites and browsers.

Solution

  • Depending on which version of firefox you are using, you may need the moz prefix: -moz-transform: translate3d(0,35px,0)