Search code examples
javascriptiosangularjssafarimobile-safari

iOS Safari reloads page on AngularJS App with ng-include


I'have a small e-commerce in AngularJS, I've built a survey, with ng-include & ng-template, and when I'm browsing this survey, randomically iOS' Safari shows the error A problem occurred with this webpage so it was reloaded. This does not happens with Google Chrome.

This is the link to the survey.

Follows an excerpt:

main page:

<div class="container mb-50" ng-show="state.canShow">
    <div ng-include src="'Questionario_Page_' + state.page"></div>
</div>

one of the survey templates

<script type="text/ng-template" id="Questionario_Page_tipo-fisico">
<h2 ng-init="form.title = 'tipo-fisico'; state.backPage = 'peso'; state.pageview()"
    class="text-center mt-0 mb-60">Quale tipologia di fisico ti appartiene di più?</h2>
<div class="row text-center" ng-init="form.valid = false">

    <div class="col-xs-4">
        <div style="max-width: 240px; margin: auto;">
            <circle-btn text="Ectomorfo" active="form.fisico === 'ECTOMORFO'"
                        description="Struttura magra"
                        img-url="//assets.mylabnutrition.net/consulenza/ectomorfo-01.png"
                        ng-click="form.fisico = 'ECTOMORFO'; state.continua('quanto-utilizzi')"></circle-btn>
        </div>
    </div>

    <div class="col-xs-4">
        <div style="max-width: 240px; margin: auto;">
            <circle-btn text="Mesomorfo" active="form.fisico === 'MESOMORFO'"
                        description="Spalle larghe e vita stretta"
                        img-url="//assets.mylabnutrition.net/consulenza/mesomorfo-01.png"
                        ng-click="form.fisico = 'MESOMORFO'; state.continua('quanto-utilizzi')"></circle-btn>
        </div>
    </div>

    <div class="col-xs-4">
        <div style="max-width: 240px; margin: auto;">
            <circle-btn text="Endomorfo" active="form.fisico === 'ENDOMORFO'"
                        description="Densità ossea, vita larga"
                        img-url="//assets.mylabnutrition.net/consulenza/endomorfo-01.png"
                        ng-click="form.fisico = 'ENDOMORFO'; state.continua('quanto-utilizzi')"></circle-btn>
        </div>
    </div>

</div>


Solution

  • Shame on me.

    I figured out what was the problem, after days of debugging with iOS devices and google searching.

    When you load too much assets (images, videos, etc...), safari seems to go in an "out of memory" of assets, I'm now using CSS Sprites for handling all the icons and now it works flawlessly.