0

I have a menu bar on the top of the screen, after the header. When I have no transforms set on the body, my code works fine and when you scroll below the menu bar it turns into a navigation bar and comes as a fixed bar on the top of the screen.

However, if I apply a transform to body like this:

-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);

then my website looks better, but when scrolling to the menu bar, it does not become fixed and on top of the screen, it actually moves to the top of the html page instead of the top of the current scrolling area.

Any idea why that could be the case?

#main-menu.isfixed {
    background: inherit;
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

Thanks

Janosch Hübner
  • 1,584
  • 25
  • 44
  • @Adam - Why not submit this as an answer? --- Maybe they're doing that now? – BSMP May 18 '15 at 15:01
  • that is my current code and it does not work – Janosch Hübner May 18 '15 at 15:04
  • 1
    Someone named Adam had a comment up about this being a known issue but they just removed it. Not sure if they removed it because it was wrong of if they're about to submit it as an answer instead. – BSMP May 18 '15 at 15:06
  • possible duplicate of [webkit css 'transform3d' + 'position: fixed' issue](http://stackoverflow.com/questions/15194313/webkit-css-transform3d-position-fixed-issue) – Andrea Ligios May 18 '15 at 15:42

1 Answers1

0

As a work around you can reduce the font size and dimensions of everything rather than scaling the entire body. Please could you supply a fiddle with the desired look.

alexrogers
  • 1,514
  • 1
  • 16
  • 27