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}}

The different templates you've posted are generated html, not templates. Compiled templates are just functions put on the Ember.Handlebars.TEMPLATES global. The malformed script tag looks like a metamorph/render bug. Try posting a jsbin with the buggy behaviour on mobile. — Darshan Sawardekar
@DarshanSawardekar Thanks, I'm aware the templates get inserted during runtime. I'll post the offending code on JSBIN however please beware that the issue will not present itself on a desktop browser. — Ben Crowhurst
@DarshanSawardekar I'm working on it! I'm having trouble finding the exact library versions on a CDN. jsbin.com/ejoxom/1 — Ben Crowhurst

Ben Crowhurst Ben Crowhurst · Accepted Answer · 2013-07-17T09:21:58

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

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

1 Answers