position: fixed; ? (css)

[pi]

I am quite new in coding and a try to build a website with GWD. - My last goal was to build a simple header <div> which is fixed on the top of the browser window. Therefore I used the following css-code:

div {

position: fixed;

width ...;

height: ...;

background-color: ...;

}

And it NEVER works. The <div> is always "unfixed". - I found out that the reason for this behavior is the code:

.gwd-body {

        background-color: transparent;

        -webkit-transform-style: preserve-3d;

        -webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);

      }

      .gwd-body {

        width: 100%;

        height: 100%;

      }

This code is generated by GWD itself - not by me. If I delete it and open my website in Chrome the <div> is fixed as I wanted it to be. - But it is impossible to delete this code pemanently. It reappears every time I open the "Design view" in GWD and every time I open the html-file in GWD.

1. Does anyone know the reason for this behavior? 

2. Does anyone know a solution? (Creating FIXED elements while maintaining the GWD-self-generated ".gwd-body"-code above)

And please remember that I am quite new in coding. I probably won't understand everything ;-)

[niccwhite]

Width and height has to have px attributes (not %), worked in my case at least, i saw this somewhere.

[Google Web Designer beta]

Hi,

You have stumbled across one of the few bugs there are in the actual CSS standard! The current standard uses inconsistent terminology about "containing" elements in the definition of 3d transforms. This has resulted in browser manufacturers guessing about what to do, and in most cases they chose to cause position: fixed elements with transformed parents to behave as if they were position: absolute.

Relevant part of the standard:
http://dev.w3.org/csswg/css3-transforms/#transform-rendering

Bug for the issue in the standard:
https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328

Related bug for Chrome:
http://code.google.com/p/chromium/issues/detail?id=20574

Relevant article by Eric Meyer:
http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/

As you can see the problem has been around for a long time, and there hasn't been much progress on the CSS bug in the last couple of years.

Because of this problem, GWD doesn't handle fixed elements very well. GWD adds the transforms to the body element to enable the 3d authoring environment. If you're using any of the 3d tools, those transforms are needed.  If you're not using any of the 3d tools you can safely remove the transforms after you publish your document, but of course that won't help you while you're using GWD.  Unfortunately there isn't really a good solution for that at the moment. We are working on some related issues that will help, though, so stay tuned.

--
Jon Reid, GWD team