Scroll Fixed Elements with CSS Transforms

<!DOCTYPE html>  
  <meta name="description" content="Transform breaks fixed position">
  <meta charset="utf-8">
  <title>Transform breaks fixed position</title>

  <div class="transform">
    This is the wrapper. It gets {gfm-js-extract-pre-1}-ed.

    <div class="fixed">

// Common scaffolding

body {  
  margin: 0;
  padding: 1.5rem;
  font: 14px/1.5 "Helvetica Neue", sans-serif;
  color: #333;
  background-color: #fff;
h1 {  
  margin: 0 0 5px;

code {  
  background-color: #eee;
  padding: 2px 5px;
  font-size: 90%;
  color: #333;
  border-radius: 3px;

// Fixed

// Min-height so things scroll
body {  
  min-height: 5000px;

// Transform the wrapping red box
.transform {
  height: 400px;
  line-height: 400px;
  color: #fff;
  text-align: center;
  background-color: red;

  // Uncomment these three lines to see it work
  -webkit-transform: translate(0, 10px);
     -moz-transform: translate(0, 10px);
          transform: translate(0, 10px);

// The fixed content is turned absolute as the transform creates a new "containing block."
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  padding: 1rem;
  background-color: #333;
  color: #fff;
  line-height: 1;