I’ve just run into a small bug I’ve not seen documented anyway so I’ll post it here for all to see.
If you apply “backface-visibility:hidden” (used in css3 transforms and transitions) to a parent of a fixed positioned element then that element loses its fixed position in Chrome and Firefox.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 - tip of the week - No.1</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
h1, p { margin:1em 25px; }
.test {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility: hidden;
}
.fixed {
position:fixed;
top:0;
right:0;
height:50px;
line-height:50px;
background:red;
padding:10px;
}
.code {
margin:25px;
background:#666;
color:#fff;
padding:20px;
width:400px;
}
</style>
</head>
<body>
<h1>Avoid "<a href="http://css-tricks.com/almanac/properties/b/backface-visibility/">backface-visibility: hidden"</a> on parents of elements placed with position:fixed</h1>
<p><strong>Affects Chrome and Firefox</strong></p>
<div class="test">
<p class="fixed">I should be "position:fixed" to top right</p>
</div>
<div class="code">
<pre>
.test {
position:relative;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.fixed {
position:fixed;
top:0;
right:0;
height:50px;
line-height:50px;
background:red;
padding:10px;
}
</pre>
</div>
<div class="code"> <div class="test"><br>
<p class="fixed">I should be "position:fixed" to top right</p><br>
</div> </div>
<p>Affects Chrome and Firefox</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
<p>some content to cause page scroll</p>
</body>
</html>
The solution is to removed the fixed element from that context so that it has no parent with the backface property applied. In most cases that should not be a problem as fixed positioned elements take their co-ordinates from the viewport so it makes no difference which context they lie in (unless you are using auto positioning and then it could be a real nuisance).
There is a similar but unrelated bug in transforms I believe but the mechanics are different.