Paralaxe no Safari não funciona | HTML5 e CSS3 II: Turbinando as suas páginas

O paralaxe funcionou em todos os browsers, menos no Safari. Eu dei uma olhada no caniuse.com para ver se o Safari suporta as propriedades usadas e suporta sim, então, eu não sei o que é que pode ser. Preciso de uma ajudinha para descobrir.

<body>
    <header class="titulo-principal">
        <img class="foto-home" src="img/eu.jpg" alt="Foto de João da Silva">
        <h1>João da Silva</h1>
        <p class="subtitulo-principal">Desenvolvedor web</p>
        <ul class="palavras-home">
            <li class="javascript">JavaScript</li>
            <li class="design">Design</li>
            <li class="eficiencia">Eficiência</li>
            <li class="otimizacoes">Otimizações</li>
            <li class="html5">HTML5</li>
            <li class="css3">CSS3</li>
            <li class="agilidade">Agilidade</li>
            <li class="acessibilidade">Acessibilidade</li>
            <li class="boas-praticas">Boas práticas</li>
            <li class="codigo-limpo">Código limpo</li>
            <li class="responsivo">Responsivo</li>
        </ul>
        <a class="banner-twitter" href="http://twitter.com/joaodasilva">Siga-me no Twitter</a>
    </header>
...

html, body {
    height: 100%;
    overflow-x: hidden;
}

body {
    perspective: 6px;
    perspective-origin: 50% 160px;
}

header {
    position: relative;
}

main {
    float: none;
    margin: 0 auto;
    padding-bottom: 0;
    width: 100%;
}

.titulo-principal, .palavras-home {
    transform-style: preserve-3d;
}

.palavras-home {
    bottom: 0;
    color: #D5447E;
    font: 1em "Shadows Into Light", sans-serif;
    font-weight: bold;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.palavras-home li {
    font-size: 400%;
    position: absolute;
}

.javascript {
    top: 32%;
    left: 60%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(2px) scale(0.25);
}

.design {
    top: 48%;
    left: 60%;
    transform: translate(-50%, -50%) rotate(-15deg) translateZ(1px) scale(0.25);
}

.eficiencia {
    top: 40%;
    left: 70%;
    transform: translate(-50%, -50%) rotate(-15deg) translateZ(1px) scale(0.25);
}

.otimizacoes {
    top: 56%;
    left: 70%;
    transform: translate(-50%, -50%) rotate(10deg) translateZ(0) scale(0.25);
}

.html5 {
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%) rotate(-15deg) translateZ(2px) scale(0.25);
}

.css3 {
    top: 28%;
    left: 76%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(1px) scale(0.25);
}

.agilidade {
    top: 28%;
    left: 40%;
    transform: translate(-50%, -50%) rotate(10deg) translateZ(2px) scale(0.25);
}

.acessibilidade {
    top: 50%;
    left: 38%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(1px) scale(0.25);
}

.boas-praticas {
    top: 60%;
    left: 26%;
    transform: translate(-50%, -50%) rotate(15deg) translateZ(0) scale(0.25);
}

.codigo-limpo {
    top: 28%;
    left: 30%;
    transform: translate(-50%, -50%) rotate(-10deg) translateZ(1px) scale(0.25);
} 

.responsivo {
    top: 44%;
    left: 30%;
    transform: translate(-50%, -50%) rotate(10deg) translateZ(2px) scale(0.25);
}

.banner-twitter {
    background-color: #3C1D3D;
    border: 4px solid black;
    color: #FFF;
    font: 1em "Open Sans Condensed", sans-serif;
    line-height: 1;
    outline: 0;
    padding: 1em 4em;
    position: absolute;
    right: 0;
    text-decoration: none;
    top: 0;
    transform: rotate(45deg) translate(3.4em,-8em);
    transform-origin: 0 0;
}

Chegou a hora de transformar