iOS app restarts when too many images are loaded

Hello everyone, I hope you all having a great day.

Here is the deal, whenever I load a lot of products from API that has one image each one of the products, the app kind of does a restart, and it loads from the beginning.

In the beginning it was with simple <img> tag, I changed it to ion-img, and I saw that there was a big difference using the ion-img tag because it lazy loads the images.

But still, when I have loaded more that 40-60 products, and those images are loaded, the app still refreshes.

I remove the images, no images are shown, and the app works fine, but the app needs those images.

What might be the issue here? Am I missing something?

Click Here for Streamable 1 video

Here the client wants to see product categories with a lot products in it

Click here for Streamable 2 video.

Here the client wants to select a product, but when it does, the app restarts.

The second video, is where I have tried, to remove the top 15 products, when get the next 15 on infinite scroll, but a scrolling flick happens because of that.

Here it is Ionic Info:

Ionic:

   Ionic CLI                     : 6.12.3 (/Users/leotrinelmazi/.nvm/versions/node/v12.19.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.1
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : ios 6.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 11 other plugins)

Utility:

   cordova-res (update available: 0.15.2) : 0.15.1
   native-run (update available: 1.3.0)   : 1.2.1

System:

   ios-deploy : 1.11.3
   ios-sim    : 8.0.2
   NodeJS     : v12.19.0 (/Users/leotrinelmazi/.nvm/versions/node/v12.19.0/bin/node)
   npm        : 6.14.8
   OS         : macOS Catalina
   Xcode      : Xcode 12.3 Build version 12C33

here is a short code of the HTML that I am using to show the products and images.

<ion-grid style="margin: 10px;" class="ion-no-padding" *ngIf="data.length < 1">

        <div *ngFor="let sub of allData">

            <ion-row *ngIf="sub.products && sub.products.length > 0">

                <ion-col size="12">

                    <ion-item lines="none">

                        <div slot="start" style="text-transform: uppercase;

                        font-weight: bold;

                        font-size: 25px;">{{sub.title}}</div>

                         <ion-button slot="end" (click)="goToShowAll()"size="small" fill="outline" class="seeAllButtonClass"><span style="margin: 10px;">voir tout</span></ion-button>

                    </ion-item>

                </ion-col>

                <ion-col size-xs="6" *ngFor="let prods of sub.products">

                    <div class="products-scroll">

                        <div>

                            <ion-card (click)="goToDetail(prods)">

                                <ion-img class="img" src="{{prods.image}}" alt=""></ion-img>

                                <div class="diviParagrafit">

                                    <p>

                                        {{prods.price}}<small>{{this.webService.config.currency}}</small>

                                    </p>

                                    <p>

                                        {{prods.title}}

                                    </p>

                                </div>

                            </ion-card>

                        </div>

                    </div>

                </ion-col>

            </ion-row>

        </div>

    </ion-grid>

This is the error that it shows up on XCODE when it restarts:

**2021-01-27 10:46:23.249648+0100 ModaPasCher[4808:3587108] [ProcessSuspension] 0x104aa9600 - ProcessAssertion: Failed to acquire RBS Background assertion 'ConnectionTerminationWatchdog' for process because PID is invalid**

**2021-01-27 10:46:23.250462+0100 ModaPasCher[4808:3587108] [Process] 0x10d02b418 - [pageProxyID=6, webPageID=7, PID=5068] WebPageProxy::processDidTerminate: (pid 5068), reason 3**

**2021-01-27 10:46:23.258873+0100 ModaPasCher[4808:3587108] [assertion] Error acquiring assertion: <Error Domain=RBSAssertionErrorDomain Code=3 "Target is not running or required target entitlement is missing" UserInfo={RBSAssertionAttribute=<RBSDomainAttribute| domain:"com.apple.webkit" name:"Background" sourceEnvironment:"(null)">, NSLocalizedFailureReason=Target is not running or required target entitlement is missing}>**

**2021-01-27 10:46:23.258990+0100 ModaPasCher[4808:3587108] [ProcessSuspension] 0x104aa9640 - ProcessAssertion: Failed to acquire RBS Background assertion 'WebProcess Background Assertion' for process with PID 5068, error: Error Domain=RBSAssertionErrorDomain Code=3 "Target is not running or required target entitlement is missing" UserInfo={RBSAssertionAttribute=<RBSDomainAttribute| domain:"com.apple.webkit" name:"Background" sourceEnvironment:"(null)">, NSLocalizedFailureReason=Target is not running or required target entitlement is missing}**

**2021-01-27 10:46:23.270927+0100 ModaPasCher[4808:3587108] [Loading] 0x10d02b418 - [pageProxyID=6, webPageID=7, PID=5068] WebPageProxy::dispatchProcessDidTerminate: reason = 3**

**2021-01-27 10:46:24.568454+0100 ModaPasCher[4808:3587108] {"id":1,"admin_id":1,"company_name":"Moda Pas Cher","logo":"https://modapascher.com/storage/images/1/logo/logo.png","admin_theme":"blush","about_desc":null,"address":"France","main_email":"[info@modapascher.com](mailto:info@modapascher.com)","tel":null,"hotline_support":1,"hotline_num":"075976979,3599785748,486845648","shipping_fee":"8.00","min_o_free":"0.00","processing_fee":"0.00","currency":"€","cash_payment":0,"shipping_type":1,"privacy_policy":null,"terms_condition":null,"status":1,"facebook":"https://www.facebook.com/ModaPasCherFR/videos/?ref=page_internal","twitter":null,"instagram":"https://www.instagram.com/modapascher/","created_at":"2020-08-31T06:54:23.000000Z","updated_at":"2021-01-26T13:51:15.000000Z"}**

**2021-01-27 10:46:24.568628+0100 ModaPasCher[4808:3587108] Ionic Native: deviceready event fired after 385 ms**

**2021-01-27 10:46:24.569162+0100 ModaPasCher[4808:3587108] initializing**

**2021-01-27 10:46:24.572560+0100 ModaPasCher[4808:3587108] OPEN database: _ionicstorage**

**2021-01-27 10:46:24.572763+0100 ModaPasCher[4808:3587108] new transaction is queued, waiting for open operation to finish**

**2021-01-27 10:46:24.572905+0100 ModaPasCher[4808:3810022] -[SQLitePlugin closeNow:] [Line 237] close db name: _ionicstorage**

**2021-01-27 10:46:24.609135+0100 ModaPasCher[4808:3810287] [Client] Updating selectors after delegate removal failed with: Error Domain=NSCocoaErrorDomain Code=4099 "The connection to service on pid 87 named com.apple.commcenter.coretelephony.xpc was invalidated from this process." UserInfo={NSDebugDescription=The connection to service on pid 87 named com.apple.commcenter.coretelephony.xpc was invalidated from this process.}**

**2021-01-27 10:46:24.634035+0100 ModaPasCher[4808:3810022] -[SQLitePlugin openNow:] [Line 176] open full db path: /var/mobile/Containers/Data/Application/2C4C0F50-3329-4F3D-8623-5666F98DC108/Library/LocalDatabase/_ionicstorage**

**2021-01-27 10:46:24.645036+0100 ModaPasCher[4808:3587108] OPEN database: _ionicstorage - OK**

**2021-01-27 10:46:24.645193+0100 ModaPasCher[4808:3587108] DB opened: _ionicstorage**

**2021-01-27 10:46:24.698638+0100 ModaPasCher[4808:3587108] The preference key "AutoHideSplashScreen" is not defined and will default to "TRUE"**

**2021-01-27 10:46:24.780668+0100 ModaPasCher[4808:3810022] Request <OSRequestRegisterUser: 0x283d8be70> success result {**

**id = "0008ce03-34fc-474c-bb1b-a1b211524dec";**

**success = 1;**

**}**

**2021-01-27 10:46:53.251675+0100 ModaPasCher[4808:3587108] Could not signal service com.apple.WebKit.WebContent: 113: Could not find specified service**

Thank you very much.

Thanx for sharimg This Article

Any console.log output to inspect in devtools? How is it working in browser?The loading spinner before reload, is that yours or the OS’?

Would be interesting to trace what is happening. Or try with less images so you know what is the cut-off point where the app works vs fails.

Sorry, have no answer. Not developing on iOS.

Nice UI, btw.

The console.log outputs is only API responses, no errors at all. The only error I am getting is on XCODE when the crash happens.

Its working in Browser and in Android, the loading spinner is mine so it loads data from API.

I did try with less products, so lets say, it works till 30-40 products, after that it crashes.

Thanks.

Just thinking out loud here…

Imagine an experiment by adding 10 pictures every 15 seconds and console log some traces. See if after 6*15 seconds it still crashes. If not, then there is something else going on which seems to time a bit with the loading of many images.

I mean, with these bugs, one needs to rethink the debugging strategy.

Even going back to a version that did work. Or even a simple barebone app that does load 100 pictures and does not crash - maybe a clean empty app that shows the images as avatars and then build the UI up to the point where it should be…

Thanks a lot for your response.

I did refactor the HTML page, one by one, and the issue was on ion-card element.

After i removed that, the issue was not happening anymore.

1 Like

Hi everyone, @mhoxha
Thanks for your reply.
Do you know what was exactly wrong with the ion-card element?
I am using the ion.rangeSlider (don’t know if this is related) and have a similar issue:
https://stackoverflow.com/questions/67571345/ios-iphone-11-flashing-black-and-white-while-browsler-is-constantly-reloading-r