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

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

1 个答案: