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