Meteor crashing Safari

Question

I've run into an incredibly ridiculous bug in my meteor app. Essentially, I have a particular page, that renders a few templates, that crashes Safari on a Mac, and only Safari (and only when the console is NOT open).

I've narrowed it down (somewhat) to a scenario that seem to help fix the problem. Removing event handling on the 'floorList' template listed below. Any thoughts, questions, suggestions would be much appreciated.

I know it's hard to say without seeing everything, but here's roughly the setup:

we're using iron-router, main template loads:

<template name="layout">
    <div id="pageWrap">
        {{> yield}}
    </div>
</template>

our "yield" is a template:

<template name="pageList">
    <div class="pages">
        {{#each pageWithRank}}
            {{> pageItem}}
        {{/each}}
    </div>
</template>

'pageItem' templates are loaded (limited to return 10 items)

<template name="pageItem">
    <div class="page">
      ...
    </div>
</template>

along with a "pageItem" js file that contains helpers and event handlers e.g.:

Template.pageItem.helpers({
    ...
});

Template.pageItem.events({
    'click .shareable': function(e, template) {
        ...
    },
    'click .share': function(e, template) {
        ...
    },
    'click .removePage': function(e) {
        ...
    }
});

Router Configuration:

var preloadSubscriptions = [];
preloadSubscriptions.push('notifications');
preloadSubscriptions.push('alerts');
preloadSubscriptions.push('myPages');

var mainYieldTemplates = {
    'footer': { to: 'footer' },
    'header': {to: 'header'}
};


Router.configure({
    layoutTemplate: 'layout',
    loadingTemplate: 'loading',
    yieldTemplates: mainYieldTemplates, 
    waitOn: function() {
        return _.map(preloadSubscriptions, function(sub) {
            if (typeof sub === 'object') {
                Meteor.subscribe(sub.subName, sub.subArguments);
            } else {
                Meteor.subscribe(sub);
            }
        });
    }
});

var coreSubscriptions = new SubsManager({
    cacheLimit: 10,
    expireIn: 1
});

pagesListController = RouteController.extend({
    template: 'pageList',
    increment: 10,
    limit: function() {
        return parseInt(this.params.pageLimit) || this.increment;
    },
    findOptions: function() {
        return {
            sort: this.sort,
            limit: this.limit()
        };
    },
    pages: function() {
        return Pages.find({}, this.findOptions());
    },
    data: function() {
        var hasMore = this.pages().count() === this.limit();
        return {
            pages: this.pages(),
            nextPath: hasMore ? this.nextPath() : null
        };
    },
    onBeforeAction: function() {
        return [
            coreSubscriptions.subscribe('pages', this.findOptions()),
            coreSubscriptions.subscribe('pagesListUsers', this.findOptions())
        ];
    }
});

We currently use 6 click events on the item template. Even if they are blank, Safari can crash, removed completely, Safari is fine.

Am I going crazy or doing something terribly wrong with this logic?

EDIT: This also sounds crazy but... by wrapping the templates in the each statement with a div seems to have fixed the problem. why would that be?

{{#each pageWithRank}}
  <div>
    {{> pageItem}}
  </div>
{{/each}}

Gobang

How did you define your iron-router route declaration? – Unapt

Hi Nate, I've edited the issue to include the router information. Also, it seems I may have fixed the issue, but not sure (also in the edit). I'd enjoy hearing your thoughts. – Gobang

Have the same problem. I created a bounty. – Mafalda

Hi Bjorn, adding the div tags around the pageItem solved our problem for now but doesn't really answer the why or what was causing the problem. Since you've created a bounty, should I just leave this open a few more days? – Gobang

Yes, do so. This issue is also present in IE9, I think. – Mafalda

Same thing happening here, and also seeing it fixed by putting an element around the template call inside the #each. Looks like a Blaze bug. – Basutoland

I was able to reproduce the problem even outside of using iron-router. However a simple <div> {{> template}} </div> even without the #each fixed the problem. It is really strange though because I had four very similar templates, but only one caused the safari crash. – Unapt

Opened an issue on the meteor repo here: github.com/meteor/meteor/issues/2384 Perhaps one of you has a repo they can reproduce the error with? I tried to recreate with the Microscope repo, which has template inside an each that is not wrapped in div, but I was not able to recreate there. – Sidereal

Answer 1

This doesn't seem to be an issue so much with Meteor as it is with the Safari web browser, from personal experience and testing with this issue in Safari. Looking at the logs and advanced debug features and taking into consideration the issue exists primarily only in Safari and in some cases IE9, it is an issue with the way the browser is attempting to render the transmitted data to the page.

In the case of IE9 this error typically only has ever been observed to occur when the html5 shim is not included and the error is a result of IE9 being unable to correctly render and interpret the data as a result of it lacking the web-kit and html5 compatibility, more often than not if the shim is included the issue is IE9 compatibility mode settings.

In the case of Safari, the issue is similar, but not the same, Safari supports html5 natively as well as the web-kit style format The issue here is a bug in Safari with the way it handles the data, you are essentially giving it a list of items but it fails to continuously append to the master div, by encapsulating it in its own sub div you are giving it a better namespace to use as well as a clearer place to render, I do not know however if this is a result of apples internal security setup or just a general render bug, but the issue does indeed lie in Safari and not Meteor

Allseed