使用jQuery的`elem.css`无法在iOS上运行动画的持续时间

Question

我正在尝试提供一种网络服务，使音乐家通过观看设备更改其显示颜色来保持节奏。

这里是Code。 和Service。

单击任意位置以显示/隐藏标题。您可以从颜色选择器中更改颜色，并从更改速度中更改速度。

通过使用jQuery的element.css({"animation": "~~"})更改动画的持续时间来实现。

我将滑块放在通过单击更改速度而显示的div中。

似乎正常。但这不是当我使用iPhone 6s（iOS 12.1）或iPhone 5s（iOS 10.2.1）浏览该网站时。

动画正在运行。但是它的持续时间没有改变。

这正是iOS真正想要做的（这也无法正常工作）

function changeInputValue(val) {
        document.getElementById("number").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
    }


    $(function () {
        const page = $("#page");
        const tempo_slider = $("#range");

        function change_tempo(tempo) {
            page.css({"animation": "color-change " + Math.round(60000 / tempo) + "ms infinite"}).parent().addClass("dummyClass");
            $("#range").val(tempo);
            $("#number").val(tempo);
        }

        const number = $("#number");

        number.keyup(function () {
            if (number.val() < 0) {
                number.val(0);
            } else if (number.val() > 300) {
                number.val(300);
                document.getElementById("number").value = 300;
            }
            document.getElementById("range").value = isNaN(parseInt(number.val(), 10)) ? 0 : parseInt(number.val(), 10);
            change_tempo(number.val());
        });


        tempo_slider.on("change", function () {
            change_tempo(tempo_slider.val());
        });

        let ave = function (arr) {
            if (arr.length < 2) {
                return 60000
            }
            let sum = 0;
            for (let i = 1; i < arr.length; i++) {
                sum += arr[i] - arr[i - 1]
            }
            return sum / (arr.length - 1);
        };


        let clicked_hist = [];
        $("#tapper_wrapper").click(function () {
            if (clicked_hist.length >= 2) {
                if (Math.abs((clicked_hist[clicked_hist.length - 1] - clicked_hist[clicked_hist.length - 2]) - (Date.now() - clicked_hist[clicked_hist.length - 1])) > 1.5 * (Date.now() - clicked_hist[clicked_hist.length - 1])) {
                    clicked_hist = []
                }
            }
            clicked_hist.push(Date.now());
            change_tempo(Math.min(300, Math.round(60000 / (ave(clicked_hist)))));
        });

    });

    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    #page {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: #FFE01B;

        animation-timing-function: step-start;

    }
    div.changer {
        display: -webkit-flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: space-around;
        justify-content: space-around;

        position: absolute;
        z-index: 3;
        width: 90%;
        height: 90%;
        margin: 5%;
        border: 10px #FFFFFF;
        border-radius: 20px;
        background-color: #ffd060;
    }

    #tempo_changer_flex_wrap {
        display: -webkit-flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: space-around;
        justify-content: space-around;

        flex-grow: 10;
        width: 80%
    }

    #number_wrapper {
        display: -webkit-flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;

        background-color: #FFFFFF;
        border-radius: 20px;
        width: 80%;
        height: 30%;
    }

    #number_wrapper > span {
        font-size: 50px;
        color: #ffad35;
        border: none;
        text-align: center;
    }

    #number {
        display: inline;
        font-size: 100px;
        color: #ffad35;
        border: none;
        text-align: center;
        width: 200px;
        background-color: rgba(1, 1, 1, 0);
    }

    #range_wrapper {
        display: -webkit-flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: space-around;
        justify-content: space-around;

        width: 100%
    }

    #range {
        height: 5px;
        width: 70%;
        border-radius: 6px;
    }

    @keyframes color-change {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Tempo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
<div id="page"></div>
<div id="tempo_changer" class="changer">
    <div id="tempo_changer_flex_wrap">
        <div id="number_wrapper"><input type="number" id="number" min="1" max="300" value="120"/><span> bpm</span></div>

        <div id="range_wrapper"><input type="range" min="1" max="300" id="range" value="120" step="1"
                                       oninput="changeInputValue(this.value)"/></div>

        <div id="tapper_wrapper">
            <button type="button"><span>Tap</span></button>
        </div>
    </div>
</div>
</body>

我尝试仅使用<div>元素和<input type="number">元素。 （如果我仅使用这两个元素以及最少的CSS和JavaScript来运行，那么在我的两个iOS设备上都很好）

谷歌搜索一天，没有解决方案。

我在下面尝试了什么

• !important
• element.css().parent().addClass("dummy").removeClass("dummy")
• 使用-webkit-animation代替animation
• 检查element.css是否正在与ios_webkit_debug_proxy配合使用（是的，已应用element.css。已获取目标元素并用动画值更改了style。）

请帮助我解决这个问题。

谢谢。