Question

此应用程序是一个虚拟转盘，因此，当您单击<div id="on-off-knob">时，转盘应开始旋转。这是我当前关注的程序的唯一部分，在页面加载后单击“打开/关闭”旋钮，以便表格旋转。为清楚起见，<div id="matt" class="rotate-matt">应该旋转。但初始加载后，它在Safari中不起作用。

我的Javascript程序可以在FF和Chrome中完美运行，但是在Safari中，仅在刷新一次页面后才可以正常运行。没有错误可言。我看过无数其他类似问题的“解决方案”，但都无法解决，解决方案不一致（带有@keyframe动画的问题，重新构造页面的加载方式，不同版本的JQuery等）

从我所看到的所有内容来看，这似乎是一个缓存问题，或者是第一次未加载某些内容。在我的Safari开发工具控制台中，它显示了正在加载的“资源”数量。第一次加载时，该数字始终较小，而在刷新时，该数字始终较大，或者至少该数字似乎发生了变化，这是我所期望的。因此，某些东西没有被加载，或者至少这就是我的解释。我不知道该如何测试。

由于可能的变量太多，因此这里有一些用于上下文的html和javascript，但我还将提供一个代码笔和指向Github上实际运行程序的链接。

相关HTML：

<div id="table-base">
    <!-- On/off knob -->
    <div id="on"></div>
    <div id="off"></div>
    <div id="knob-base"></div>
    <div id="on-off-knob">
        <div id="knob-select"></div>
    </div>
    <!-- Platter that spins -->
    <div id="platter"></div>
    <div id="matt" class="rotate-matt">
        <div id="spindle"></div>
    </div>
    <!-- Tone arm with needle -->
    <img src="img/tone_arm_new.png" id="tone-arm" class="tone-arm-off">
    <div id='vinyl-placeholder'></div>
</div>

相关JS：

//Check rotate vinyl or matt
if(recordLoaded == true){
    //Rotate vinyl
    $('#vinyl-rotate').css('animation-play-state', 'running');
}
else{
     //Rotate matt
     $('#matt').css('animation-play-state', 'running'); 
}

JS是较大点击事件的一部分，我只关心$('#matt').css('animation-play-state', 'running');部分。

以下是在Codepen上整个程序的精简版：Space Vinyl Codepen

该错误不会在Safari中的Codepen上发生，因此不确定是什么意思。这是Github Space Vinyl Github上的完整程序，单击旋钮在第一次加载时不会产生任何作用。另外，这是完整的存储库Space Vinyl Repository

Javascript / JQuery程序仅在Safari中刷新后才能工作

0 个答案: