New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
4 participants
@aaronlord

aaronlord commented Aug 19, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jmalonzo

jmalonzo Aug 21, 2013

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

jmalonzo commented Aug 21, 2013

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

This comment has been minimized.

Show comment
Hide comment
@lynndylanhurley

lynndylanhurley Aug 22, 2013

Is there a quick workaround for this?

lynndylanhurley commented Aug 22, 2013

Is there a quick workaround for this?

@aaronlord

This comment has been minimized.

Show comment
Hide comment
@aaronlord

aaronlord Aug 22, 2013

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

}));

aaronlord commented Aug 22, 2013

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

This comment has been minimized.

Show comment
Hide comment
@lynndylanhurley

lynndylanhurley Aug 23, 2013

That works, thx @aaron-lord!

lynndylanhurley commented Aug 23, 2013

That works, thx @aaron-lord!

@vovanbo

This comment has been minimized.

Show comment
Hide comment
@vovanbo

vovanbo 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.

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