Программа Javascript / JQuery работает только после обновления в Safari - PullRequest
Новая
       8

Программа Javascript / JQuery работает только после обновления в Safari

0 голосов
/ 03 сентября 2018

Это приложение представляет собой виртуальный проигрыватель, поэтому при нажатии на <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

Ошибка не возникает на codepen в Safari , поэтому не уверен, что это значит. Вот полная программа в реальном времени на Github Space Vinyl Github , нажатие на ручку не должно производить никаких действий при первой загрузке. Также здесь находится полный репозиторий Space Vinyl Repository

...