Uncaught SyntaxError: An invalid or illegal string was specified

[aaronlord]

Uncaught SyntaxError: An invalid or illegal string was specified is being thrown by the following code:

sheet.insertRule('@' + pre + 'keyframes ' + name + ' { ' +
  '0% { opacity:' + z + '; }' +
    start + '% { opacity:' + alpha + '; } ' +
    (start+0.01) + '% { opacity: 1; } ' +
    (start+trail) % 100 + '% { opacity:' + alpha + '; } ' +
    '100% { opacity:' + z + '; } ' +
  '}', sheet.cssRules.length)

It looks like Canary has beef with the @keyframes.

Browser: 31.0.1605.0 (Official Build 218205) canary

[jmalonzo]

It looks like this is a regression in Chrome Canary. See [1] for more details.

[1] https://code.google.com/p/chromium/issues/detail?id=276086

[lynndylanhurley]

Is there a quick workaround for this?

[aaronlord]

For now, I just removed the CSS3 animation.

File: spin.js @ line 350~

  if (!vendor(probe, 'transform') && probe.adj) initVML()
  else useCssAnimations = false //vendor(probe, 'animation')

  return Spinner

}));

[lynndylanhurley]

That works, thx @aaron-lord!

[vovanbo]

This issue can be solved by properly determine of keyframes prefix. In latest Chrome Canary "animation" and "animationName" used without prefix, but keyframes still use "-webkit-" prefix. CSS rule inserted in DOM stylesheet throw error because for keyframes used prefix for "animation" determined in following code (here):

else useCssAnimations = vendor(probe, 'animation')

I write some function for proper determination prefix for keyframes (tested only in Chrome Canary, Firefox Nightly, Opera 12.16):

function get_keyframes_prefix() {
  var tmp_el, tmp_sheet, rule, parent,
      prefixes = ["", "-webkit-", "-moz-", "-o-", "-ms-"],
      success = false;

  tmp_el = document.createElement("style");
  tmp_el['type'] = "text/css";
  parent = document.getElementsByTagName('head')[0];
  parent.appendChild(tmp_el);
  tmp_sheet = tmp_el.sheet || tmp_el.styleSheet;

  for (var prefix in prefixes) {
    rule = "@" + prefixes[prefix] + "keyframes name{}";
    try {
      tmp_sheet.insertRule(rule, 0);
      success = true;
      break;
    }
    catch (e) {
    }
  }
  parent.removeChild(tmp_el);
  return success === true ? prefixes[prefix] : false;
}

It can be used in addAnimation() function like this (here):

pre = get_keyframes_prefix();

It worked for me, but without wide testing.