Ember, Handlebars, Contrib-Ember-Templates produce malformed templates on mobile browsers

Question

Using Gruntjs plugin contrib-ember-templates produces incorrect results when viewed on a mobile browser.

Generated Template

<div id="ember570" class="ember-view">
<section>
    <div class="center">
        <div class="logo-container">
        </div>
        <div class="misuseAct">
            <script id="metamorph-0-start" type="text/x-placeholder"></S'+'CRIPT>
                <h1>Hello to Splash Page</h1>
                <p>Welcome to my splash page</p>
                <a href="#" data-ember-action="1" class="btn btn-success right" id="proceed">Proceed</a>
            <script id='metamorph-0-end' type='text/x-placeholder'></S'+'CRIPT>
        </div>
    </div>
</section></script></div></div></section></div>

However editing the template via live debugging produces the desired results.

Desired template

<div id="ember570" class="ember-view">
<section>
    <div class="center">
        <div class="logo-container">
        </div>
        <div class="misuseAct">
            <script id="metamorph-0-start" type="text/x-placeholder"></script>
                <h1>Hello to Splash Page</h1>
                <p>Welcome to my splash page</p>
                <a href="#" data-ember-action="1" class="btn btn-success right" id="proceed">Proceed</a>
            <script id='metamorph-0-end' type='text/x-placeholder'></script>
        </div>
    </div>
</section></div></div></section></div>

Additional Information

• This issue only appears when using EmberJS minified (release build).

• This issue does not show itself on desktop browsers.

• This issue produces no console messages.

• Running grunt --verbose shows no error/warning messages.

Technology Stack

NodeJS - v0.10.12

grunt-cli v0.1.9

grunt v0.4.1

grunt-contrib-templates - 0.4.10

JQuery - v1.10.2

These are used by contrib-grunt-template and the frontend client application.

EmberJS - v1.0.0-rc.6-15-gfe89337 (minified)

Handlebars - 1.0.0

EDIT:

This issue only presents itself when a view is being used on the template.

uncompiled template

<section>
    <div class="center">
        <div class="logo-container">
        </div>
        <div class="misuse">
            {{#if view.showProtection}}
                <h1>{{localise _data_protection_act_header}}</h1>
                <p>{{localise _data_protection_act_body}}</p>
                {{#linkTo "login" classNames="btn btn-success right" id="proceed"}}{{localise _proceed}}{{/linkTo}}
            {{else}}
                <h1>{{localise _misuse_act_header}}</h1>
                <p>{{localise _misuse_act_body}}</p>
                <a href="#" {{action 'agrees' target="view"}} class="btn btn-success right" id="proceed">{{localise _proceed}}</a>
            {{/if}}
        </div>
    </div>
</section>

Index View

Application.IndexView = Ember.View.extend({
    showProtection: false,
    agrees: function () {
        this.set('showProtection', true);
    }
});

EDIT:

I've narrowed this down specifically to this line in the template.

 {{#if view.showProtection}}
    ...
 {{else}}
    ...
 {{/if}}

Answer 1

This issue was relating to the mobile data provider O2 (Possibly others, but not Vodafone or 3).

It appears to be because of O2's rather strict data policies, where they will minify, strip and do all kinds of crazy things to the files going over their network.

A work around is provided here