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

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