2013-08-07 66 views
0

我嘗試使用javascript重寫下面的css關鍵幀規則。它適用於普通桌面Safari和ipad safari瀏覽器,但不適用於ipad webview。在ipad webview上找不到關鍵幀css規則

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 ; 

回答

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