简体   繁体   中英

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>

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM