I'm using `requestAnimationFrame` in Javascript for moving an html `div` by changing its "top" and "left" CSS properties. It works fine on Safari 7.1.2 but the `div` doesn't move a bit on Firefox, Chrome or Opera.

The crazy thing is that, on Chrome and Opera, if you drag the corner of the window (attempting to change its size) the `div` starts to move... and then immediatly stops moving when you release the mouse from the corner.

Here's the source code:

```
<!DOCTYPE html>

<head>
    <meta charset="utf-8"/>
    <title>exp_2</title>
    <link rel="stylesheet" type="text/css" href="exp_1.css">
</head>

<body>
    <div class="box_out" id="b1"><p id="menu_text">gallery</p></div>

    <script type="text/javascript">
        var middle = document.querySelector("body").clientWidth / 2 - 50;
        window.addEventListener("resize", function() {
            middle = document.querySelector("body").clientWidth / 2 - 50;
        });

        var div = document.getElementById("b1");
        var angle = 0, lastTime = null;
        function animate(time)
        {
            if (lastTime != null)
                angle += (time - lastTime) * 0.0002;
            lastTime = time;
            div.style.top = (150 + Math.sin(angle) * 100) + "px";
            div.style.left = (middle + Math.cos(angle) * 100) + "px";
            requestAnimationFrame(animate);
        }
        requestAnimationFrame(animate);
    </script>
</body>
</html>

```

and here's the CSS `class` and `id`s I've been using:

```
body
{
    text-align: center;
    background-color: #232323;
    color: white;
}

#menu_text
{
    font-family: Trebuchet MS, Helvetica, Arial;
    font-size: 1.5em;
    padding-top: 2em;
}

.box_out
{
    box-shadow: 2px 4px 15px black;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    text-align: center;
    width: 6em;
    height: 6em;
    background-color: #663300;
    -webkit-transition: 0.1s ease-out;
    -moz-transition: 0.1s ease-out;
    -o-transition: 0.1s ease-out;
}

.box_out:hover
{
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -ms-transform: scale(1.4);
}

```

Is `requestAnimationFrame` the problem or is there some compatibility issue with my CSS? I even tried leaving out the event listener for the `clientWidth` but the problem doesn't seem to be here.