drublic/dabblet.css

## dabblet.css
/**
 * Bug with -webkit-transform: translateZ(0); (translateX and translateY too) and position: fixed in WebKit
 */

html {
	height: 100%;
}

body {
	height: 100%;
	padding: 100px 0;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
}

nav {
	position: fixed;
	top: 0;
	left: 0;
	background: #eee;
}

ul {
	padding: 10px;
}

li {
	display: inline;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<nav>
	<ul>
		<li>This is the behavior in Chrome Stable,</li>
		<li>Chrome Canary,</li>
		<li>WebKit Nightly (r118267),</li>
		<li>Safari 5.1.5</li>
		<li>Firefox Stable</li>
	</ul>
</nav>

<p>This navigation should be fixed at the position where it is when scrolling.
<p>The behavior is not as expacted in the browsers named above, when adding <code>-webkit-transform: translateZ(0);</code> to the parent of the fixed element.
Also this occures when using translateX() or </code>translateY()</code>.

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"html"}
	/**
	* Bug with -webkit-transform: translateZ(0); (translateX and translateY too) and position: fixed in WebKit
	*/

	html {
	height: 100%;
	}

	body {
	height: 100%;
	padding: 100px 0;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	}

	nav {
	position: fixed;
	top: 0;
	left: 0;
	background: #eee;
	}

	ul {
	padding: 10px;
	}

	li {
	display: inline;
	}
	<!-- content to be placed inside <body>…</body> -->
	<nav>
	<ul>
	<li>This is the behavior in Chrome Stable,</li>
	<li>Chrome Canary,</li>
	<li>WebKit Nightly (r118267),</li>
	<li>Safari 5.1.5</li>
	<li>Firefox Stable</li>
	</ul>
	</nav>

	<p>This navigation should be fixed at the position where it is when scrolling.
	<p>The behavior is not as expacted in the browsers named above, when adding <code>-webkit-transform: translateZ(0);</code> to the parent of the fixed element.
	Also this occures when using translateX() or </code>translateY()</code>.