All im doing is looping through data from a local mock and iterating over the list of answers and pulling their img path (images located in assets folder)
sometimes the images misrender a bit, othertimes completely
This is really strange, it only seems to happen on cordova ios builds, haven’t been able to replicate with ionic serve.
<!-- [ngclass] questionClass just applies a bg image class based on question number-->
<ion-content [ngClass]="questionClass" *ngIf="question" no-bounce no-padding>
<div style="width:95%;margin:0 auto;">
<div class="topSection">
<!-- display the question-->
<h1>
{{question.question}}
</h1>
</div>
<ion-grid>
<ion-row>
<!--loop through the answers for that particular question-->
<ion-col col-4 *ngFor="let answer of question.answers; trackBy: trackAnswer">
<!-- [ngClass] selected item is used if a product is selected to highlight it-->
<div class="answerImageWrap" [ngClass]="{'selectedItem' : (productIsSelected(answer.productId))}" (click)="answerClick(answer)">
<!--img is located in assets folder so its just a reference assets/imgs/filename.png-->
<img style="width:100%;" src="{{answer.product.imageUrl}}"/>
</div>
</ion-col>
</ion-row>
</ion-grid>
<div *ngIf="this.questionNum==(this.room.questions.length - 1)">
<button class="doneButton" *ngIf="this.selectedStack.length == this.question.answerMultiNum" (click)="multiSelectDone()">DONE!</button>
<p *ngIf="this.selectedStack.length !== this.question.answerMultiNum" style="text-align: center;color:red;">{{this.question.answerMultiError}}</p>
</div>
</div>
<img id="restartButton" src="assets/imgs/restartButtonThanks.png" (click)="resetApp();"/>
</ion-content>
ionViewWillEnter() {
this.navCtrl.swipeBackEnabled=false;
console.log('ionViewWillEnter QuestionPage');
if (this.navParams.get('room')) {
this.room = this.navParams.get('room');
this.questionNum = this.navParams.get('questionNumber');
this.question = this.room.questions[this.questionNum];
this.questionClass = "question" + (this.questionNum + 1) + "Content";
}
else {
//for testing purposes only
this.room = this.roomList[0];
//this.navCtrl.setRoot('WelcomePage');
}
if (this.navParams.get('score')) {
this.score = this.navParams.get('score');
console.log('yo its the score', this.score);
}
else {
console.log('stubbing out the score ray');
this.score = {
answersRay: [],
room: this.room,
currentQuestion: 0
}
this.score.room = this.room;
}
}
any insight is greatly appreciated.
cli packages: (/Users/john/.nvm/versions/node/v8.9.4/lib/node_modules)
@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
@ionic/app-scripts : 3.1.8
Cordova Platforms : ios 4.5.4
Ionic Framework : ionic-angular 3.9.2
System:
ios-deploy : 1.9.2
Node : v8.9.4
npm : 5.6.0
OS : macOS Sierra
Xcode : Xcode 9.2 Build version 9C40b
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : pro
Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios Then inspect the images and see if they also misrender in the debug view you are having.
By the way: Simulator or real device? What iOS version? Same on Android?
1 Like
tested and confirmed bug on real device ionic cordova buidls.
IOS 11.2.6 , devices were 10.5 inch ipad pro (latest) and iphone 7.
Unable to replicate in browsers or simulators.
have not yet tested on android, will test though.
no errors in xcode debug console, but will take a look at the remote debug link you provided. thanks for the feedback!
1 Like
tested using the safari dev tool, no exceptions or errors code looks right, but on the device the error is currently happening…
<ion-grid class="grid">
<ion-row class="row">
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object",
"ng-reflect-ng-for-track-by": "function (index, answer) {\n "
}--><ion-col class="col" col-4="">
<div class="answerImageWrap selectedItem" ng-reflect-klass="answerImageWrap" ng-reflect-ng-class="[object Object]">
<img style="width:100%;" alt="product_205" src="assets/imgs/Bathroom_q4p1.png">
</div>
</ion-col><ion-col class="col" col-4="">
<div class="answerImageWrap" ng-reflect-klass="answerImageWrap" ng-reflect-ng-class="[object Object]">
<img style="width:100%;" alt="product_215" src="assets/imgs/Bathroom_q4p2.png">
</div>
</ion-col><ion-col class="col" col-4="">
<div class="answerImageWrap" ng-reflect-klass="answerImageWrap" ng-reflect-ng-class="[object Object]">
<img style="width:100%;" alt="product_216" src="assets/imgs/Bathroom_q4p3.png">
</div>
</ion-col><ion-col class="col" col-4="">
<div class="answerImageWrap" ng-reflect-klass="answerImageWrap" ng-reflect-ng-class="[object Object]">
<img style="width:100%;" alt="product_217" src="assets/imgs/Bathroom_q4p4.png">
</div>
</ion-col><ion-col class="col" col-4="">
<div class="answerImageWrap" ng-reflect-klass="answerImageWrap" ng-reflect-ng-class="[object Object]">
<img style="width:100%;" alt="product_218" src="assets/imgs/Bathroom_q4p5.png">
</div>
</ion-col><ion-col class="col" col-4="">
<div class="answerImageWrap" ng-reflect-klass="answerImageWrap" ng-reflect-ng-class="[object Object]">
<img style="width:100%;" alt="product_219" src="assets/imgs/Bathroom_q4p6.png">
</div>
</ion-col><ion-col class="col" col-4="">
<div class="answerImageWrap" ng-reflect-klass="answerImageWrap" ng-reflect-ng-class="[object Object]">
<img style="width:100%;" alt="product_220" src="assets/imgs/Bathroom_q4p7.png">
</div>
</ion-col><ion-col class="col" col-4="">
<div class="answerImageWrap" ng-reflect-klass="answerImageWrap" ng-reflect-ng-class="[object Object]">
<img style="width:100%;" alt="product_221" src="assets/imgs/Bathroom_q4p8.png">
</div>
</ion-col><ion-col class="col" col-4="">
<div class="answerImageWrap" ng-reflect-klass="answerImageWrap" ng-reflect-ng-class="[object Object]">
<img style="width:100%;" alt="product_222" src="assets/imgs/Bathroom_q4p9.png">
</div>
</ion-col>
</ion-row>
</ion-grid>
whats really interesting, is when i hit the screenshot button using the safari web inspector the screenshot looks how it should but the device is still showing the distorted images.
So i may have tracked it down to a glitch with filter: drop-shadow with ios… its only happening once in 30 tries now though so its hard to isolate for sure.
1 Like
I am having the same issue with png and svg files sometimes. However, I do not use the filder:drop-shadow Anybody knows whos to solve this problem?
