Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

2.0-wip: "border-radius: 0 \0/" breaks Sass and Rails asset compilation #1394

Closed
msheakoski opened this Issue · 7 comments

3 participants

@msheakoski

As the title says, SHA: b77161f includes a \0/ which causes Sass to raise an exception when processing bootstrap.css. Although I'm not using Sass directly with bootstrap, just including it in the vendor/assets/stylesheets dir of a Rails app runs it through the asset pipeline and eventually generates this error. Is there a different way to reset the border for IE9?

@msheakoski

Instead of resorting to CSS hacks, why not namespace the IE-specific CSS and promote the usage of IE conditional comments on the <html> tag like HTML5 Boilerplate does? This seems like the most correct way to do things.

https://github.com/h5bp/html5-boilerplate/blob/master/index.html#L1-7

Then you can do:

.ie9 {
  input[type="image"], input[type="checkbox"], input[type="radio"] {
    border-radius: 0;
  }
}
@mdo
Admin

Either way, it's a hack. Using classes on the body or html tags is inefficient and can trigger sloppy performance of the CSS. We won't be going that route.

This sounds more like a problem for Rails and not Bootstrap specifically—they should allow for escaping of such characters.

@mdo mdo closed this
@msheakoski

It's an issue specifically with SASS. I'll file a bug report on that project. Thanks.

@msheakoski

I'm back :) I did a little bit of research and here's what's happening. Sass supports computed properties such as border-radius: 100px / 5px; so your trailing / was causing the parser to look for another non-; token. According to this blog post, you can put some text after the / and it still works.

The fix for this issue is to change border-radius: 0 \0/; to border-radius: 0 \0/IE8+9;

I tested it in Safari, Firefox and IE9 and it works.

@paulanunda

1 day late with this issue, thanks GMFlash for providing a solution.

@ghost

I was also experiencing this problem, and I think this is a nicer solution:

border-radius: 0 e("\0/");
@msheakoski

The goal of the commit which added this style is to reset the border-radius to 0 only for IE8/9.

border-radius: 0 e("\0/"); doesn't get picked up by IE.

The working solution is still: border-radius: 0 \0/IE8+9;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.