IE breadcrumb display is ugly when using SASS version 3.4

[tdonohue]

When using the latest version of SASS (version 3.4) with bootstrap-sass, the breadcrumb separator is wrongly decoded as ISO-8859-1 when using Internet Explorer version 10 and 11.

The problematic character seems to be the Unicode non-breaking space (\00a0) on this line:
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_breadcrumbs.scss#L17

In SASS version 3.3, the hexcode for the Unicode non-breaking space was left as-is in the final CSS. So, the final CSS would actually include "\00a0". However, in SASS version 3.4, this behavior has changed, and in the final CSS the character is now translated to a Unicode space (" ").

While most browsers (Chrome, Firefox, Safari, Opera) properly display this new Unicode space (" ") from CSS, for some reason Internet Explorer wants to read it as ISO-8859-1 and displays "Â " instead. The resulting breadcrumb is something like this (assuming your breadcrumb-separator is the default slash):

Home /Â  Page /Â  SubPage

In the end, this means that SASS version 3.4 + bootstrap-sass results in ugly breadcrumbs in Internet Explorer. Whereas, SASS version 3.3 + bootstrap-sass works perfectly in all browsers.

More information (including some possible workarounds using functions) on this new behavior in SASS version 3.4 can be found in this related SASS ticket/request: sass/sass#1395

The only workaround I've found so far is to simply revert to using SASS version 3.3.

[cvrebert]

@twbs/sass Ping.

[glebm]

Unquoting the string seems to work around the issue. Will work around on the converter level.

[cvrebert]

Does IE misinterpret it even with a @charset declaration in the CSS?

[cvrebert]

@tdonohue Does your CSS include an @charset declaration?

[cvrebert]

JS Bin testcase: http://output.jsbin.com/potulo/2
(Using Sass 3.4.14 (Selective Steve))

[cvrebert]

Unable to reproduce in IE11:

Unable to reproduce in IE10:

@glebm Were you ever able to repro this?

[glebm]

The cause of this seems to be sass/sass#1395:

SASS outputs a file with a BOM, which ends up in the middle of my concatenated files and causes other headaches.

I am guessing this is reproducible if there are other non-UTF-8 CSS files concatenated with bootstrap, but I haven't tried myself.

One workaround in that thread is:

<meta charset="utf-8" />

@tdonohue Can you try this? Thanks

[cvrebert]

Sounds like either a Sass bug or a concatenator bug then, as opposed to a bug in Bootstrap itself.

[glebm]

Yes, though it may be possible to work around this on our side, I haven't found a way to this compatibly with all Sass versions (I have already tried all of the workaround in the linked sass bug). Closing for now, as this is something a smart concatenator should handle anyway.