Javascript可以在Safari上运行，但不能在任何其他浏览器上运行

Javascript working on Safari but not on any other browser

本文关键字：运行 任何 其他 浏览器 但不能 Safari Javascript      更新时间：2023-09-26

我在Javascript中使用requestAnimationFrame，通过更改其"top"answers"left"CSS属性来移动html div。它在Safari7.1.2上运行良好，但div在Firefox、Chrome或Opera上一点也不移动。

疯狂的是，在Chrome和Opera上，如果你拖动窗口的一角（试图改变其大小），div就会开始移动。。。然后在从角落释放鼠标时立即停止移动。

这是源代码：

<!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>

这是我一直在使用的CSS class和id：

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);
}

requestAnimationFrame是问题还是我的CSS有兼容性问题？我甚至尝试将clientWidth的事件侦听器排除在外，但问题似乎并不存在。

问题是您的转换CSS导致它无法运行：

-webkit-transition: 0.1s ease-out;
-moz-transition: 0.1s ease-out;
-o-transition: 0.1s ease-out;

http://jsfiddle.net/xs40d7dd/

我不熟悉requestAnimationFrame，但我猜测它是一种转换的替代方式（通过JS而不是CSS）。如果你想使用transition CSS，我建议你只设置顶部/左侧，而不使用requestAnimationFrame。

如果你在其他动画帧上运行它，它在Firefox中的效果会更好：

    var div = document.getElementById("b1");
    var angle = 0, lastTime = null, toggle = false;
    function animate(time)
    {
        toggle = !toggle;
        if (!toggle) {
          var oldangle = angle;
          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);

忘记供应商前缀的有用工具：
https://leaverou.github.io/prefixfree/

非常有用，只需调用脚本，无需-o -moz -webkit

相关文章：