Problems like this is why I prefer backend development. One browser crashing for what appears to be no good reason, and no real way to troubleshoot except commenting out code and running to try and find the culprit, just raises my blood pressure.

I have two routes specified in my header. New and Popular.

If I switch quickly between the two (progress bar never gets to right side of page before I click the alternate route) I can eventually create an error in Safari that says “a problem occurred with this webpage so it was reloaded.”

The other crazy thing to note was that the error never happened if we had the safari developer console open!

Even before I tried to find the needle in this haystack, I decided I might need to tighten up my routes and templates. Even after a 3 hour clean up sesh that started at 2am, and still getting nowhere (except code to clean you could eat of it) my co-founder and I had to get dirty commenting out small chunks of code until the app was stable.

What we discovered the issue was, and the workaround, still makes me shake my head…

We had a list of items being rendered into a template like this:

{{#each itemsWithRank}} 

    {{> itemItem }} 

{{/each}}

Super simple, but commenting this each block helper stabilized our crashes. Why would this be an issue? It’s really no different than many of the examples we have seen on the web or in other projects.

My co-founder decided to just wrap the the template inside the each block with a div, prevented our error. All we did was this:

{{#each itemsWithRank}} 

    <div> 

        {{> itemItem }} 

    </div> 

{{/each}}

Still not sure why this is needed, only for Safari, but it works! I hope this saves you some time, because it took us far too long to figure this out.