javascript - 在 ipad webview 上找不到关键帧 css 规则

Question

我尝试使用 javascript 重写下面的 css 关键帧规则。它适用于普通桌面 safari 和 ipad safari 浏览器，但不适用于 ipad webview。

css

@-webkit-keyframes "scroll" {
    0% {
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }
    55% {
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }
    100% {
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }




function findKeyframesRule(rule)
{
    var ss = document.styleSheets;
    for (var i = 0; i < ss.length; ++i) {
        for (var j = 0; j < ss[i].cssRules.length; ++j) {
            if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule)
                return ss[i].cssRules[j];
        }
    }
    return null;
}

findKeyframesRule("scroll");  // it returns null ;

Answer 1

Ipad webview 有一个旧的 safari 引擎，所以它不支持新的标准语法，也不会接受 css 规则列表。

@-webkit-keyframes "scroll" {
    0% {
        -webkit-transform: translateY(0px);
    }
    55% {
        -webkit-transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(0px);
    }


function findKeyframesRule(rule)
{
    var ssheets = document.styleSheets;
    for (var i = ssheets.length - 1; i >= 0; i--) {
        var cssRules = ssheets[i].cssRules;
        for (var j = ssheets[i].cssRules.length - 1; j >= 0; j--) {
                if (cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && cssRules[j].name == rule){
                        return cssRules[j];
                }
        };
    };
    return null;
}