Uncaught SyntaxError: An invalid or illegal string was specified #168

Closed
aaronlord opened this Issue Aug 19, 2013 · 5 comments

Projects

None yet

4 participants

@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
vovanbo commented Aug 24, 2013

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.

@fgnass fgnass closed this in 9628286 Aug 26, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment