Ember JS 1.8.1 + Chrome - Additional whitespaces

1

I have a problem in the app that I’m working on, since I upgraded EmberJS from 1.6.1 to 1.8.1. It happens only under Chrome. The issue is that somehow my templates are being rendered with lots of additional spaces surrounding each html node. So to say… instead of:

<div>
[tab]<span>Hello</span>
</div>

I get something like this rendered:

<div>[ ][ ][ ][ ][ ][ ][ ][ ][ ]
[ ][ ][ ][ ]<span>Hello</span>[ ][ ][ ][ ]
</div>[ ][ ][ ][ ]

Or maybe you’ll see it here: An example:

That obviously breaks styling a lot. The funny thing is that when I remove at least one space from such strange construct, then magically the styling for given section is back (even though other spaces are still there).

Just to mention. I’m using ember-grunt-templates 0.4.21 to compile. I know that there are new versions of it (0.4.23 I think…) and I tried to update it as well, but it doesn’t help.

I know that there was a mention here: Ember.js 1.8.1 Released about whitespace issue in Chrome, but it says that people get the opposite effect of missing spaces due to some bug in Chrome. ;> Is my Chrome instance consuming and gathering all other people whitespaces or what? :slight_smile:

Anyone encountered similar issue (like mine, not like the one mentioned in Ember release notes)? Anyone knows how to get rid of this?

Update 1:

I tried to update to:

  • Ember 1.9
  • Handlebars 2.0
  • Grunt-Ember-Templates 0.5 alpha

That fixes few occurrences of whitespace issue, but some are still present. I.e. that results in a space in front of rendered text:

<span class="someClass">
    {{#if condition}}{{someProperty}}{{else}}{{t 'translationKey'}}{{/if}}
</span>

And that doesn’t:

<span class="someClass">{{#if condition}}{{someProperty}}{{else}}{{t 'translationKey'}}{{/if}}</span>

:expressionless:

2

It sounds like you need Handlebars whitespace control:

http://handlebarsjs.com/expressions.html#whitespace-control

3

It turns out to be a line ending encoding related bug. I reported that issue here: Windows newlines cause extra whitespace in 1.8, 1.9 and Safari/Chrome · Issue #9945 · emberjs/ember.js · GitHub

Solution is to make sure that line ending encoding has to be Unix-like.

1 Like