Application renders differently on android 6.0 and on android 4.2.2

Hello everyone,

with the application I am building in Ionic 2, I have different rendering outputs

According to me, android below 5.0 may have a different webview renderer that in highest versions, but anyway, how can I solve this issue, I mean how can I target different android versions with css ? Also, as I am not very good at css, what is the best way to adapt content on android 4.2.2 for example ?

My project github repository : the relevant commit.

This is my app/pages/home/home.html

<ion-toolbar primary>
  <ion-title>
    Home
  </ion-title>
</ion-toolbar>

  <ion-content class="home">
      <ion-list>
          <div ion-item *ngFor="let item of getFiles()">
              <img src="{{getPicturePathForItem(item)}}" [width]="getFileTypeIconSize()" [height]="getFileTypeIconSize()"/> 
              {{item.name}}
          </div>
      </ion-list>
    </ion-content>

<ion-toolbar primary position="bottom">
    <ion-title>
        Footer
    </ion-title>
</ion-toolbar>

This is my /app/pages/home/home.ts

import {Page, Platform} from 'ionic-angular';

interface FileItem {
    name:string;
    isDirectory:boolean;
}

@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  private files:Array<FileItem>;
  private minScreenSize:number;
  private fileTypeIconSize:number;

  constructor(platform:Platform){
      this.minScreenSize = platform.width() < platform.height() ? platform.width() : platform.height();
      this.fileTypeIconSize = this.minScreenSize * 0.10;

      this.files = [
        {name: "ex02.fen", isDirectory:false},
        {name: "test05", isDirectory:true},
        {name: "test03", isDirectory:true},
        {name: "ex04.fen", isDirectory:false},
        {name: "test01", isDirectory:true},
        {name: "ex03.fen", isDirectory:false},
        {name: "ex01.fen", isDirectory:false},
        {name: "test02", isDirectory:true},
        {name: "ex05.fen", isDirectory:false},
        {name: "test04", isDirectory:true},
        {name: "ex06.fen", isDirectory:false},
        {name: "test06", isDirectory:true},
        {name: "ex07.fen", isDirectory:false},
        {name: "ex08.fen", isDirectory:false},
        {name: "ex09.fen", isDirectory:false},
        {name: "ex10.fen", isDirectory:false},
        {name: "ex11.fen", isDirectory:false},
        {name: "ex12.fen", isDirectory:false},
        {name: "ex13.fen", isDirectory:false},
        {name: "ex14.fen", isDirectory:false},
        {name: "ex15.fen", isDirectory:false},
        {name: "ex16.fen", isDirectory:false},
      ];
  }

  public getFiles():Array<FileItem> {
      return this.files;
  }

  public getPicturePathForItem(item:FileItem):string {
      if (item.isDirectory){
          return 'build/images/folder.png';
      }
     else {
          return 'build/images/file.png';
      }
  }

  public getFileTypeIconSize():number {
      return this.fileTypeIconSize;
  }

}

Thanks in advance.

@loloof64 I would recommend you to use Crosswalk if you need to support Android version older than 4.4, check out the following topic for more details:

Thank you, I’ll install it to be sure that all Android devices from 4.0 fit well with my application.
I found a way to get a consistent rendering on both Android 4.2.2 emulator, android 6.0 emulator and pc web browser, but I’ll install crosswalk to be sure. As furthermore, I won’t test all android starting from 4.0. So I think it worth the extra 20mb.

My trick is something like that

<ion-content class="home">
  <ion-list no-lines>
      <ion-item *ngFor="let item of getFiles()">
          <img item-left [src]="getPicturePathForItem(item)" [width]="getFileTypeIconSize()" [height]="getFileTypeIconSize()"/>
          <h1 item-left>{{item.name}}</h1>
      </ion-item>
  </ion-list>
</ion-content> 

where I removed list lines, and put both picture and text as item-left elements.

IMHO Crosswalk is still a good compromise for all the performance improvements and standards compliance that it provides so it’s worth the extra 20MB (and in case that you decide to optimize the size of your app at some point, you can take a look at Crosswalk Lite which is half the size but might be more difficult to install and configure).

Yes, and I can confirm that using crosswalk solved my problem. (Tested with Ionic view application). I only plan to use the lite version if ever my application grows about 80Mb-100Mb. For now, it is about 30Mb, which is still very good according to me. Also, I think I can remove my trick for the list view, and try the standard way again.

Also, is there a way to declare the subject as solved ?

Yes, as the OP (topic creator) you will have a button that allows you to accept an answer (for more details about this check out the following topic):

https://discourse-meta.s3-us-west-1.amazonaws.com/optimized/3X/9/d/9d170786db8aa0d25f11755df07e44994e1d9990_1_690x239.png

Finally I am still getting rendering problems, even with crosswalk, as I went a bit further in my development, at least on android api 23 emulator. (Don’t worry about the fact that the main content is empty, as I plan to read folder content there).

  • When testing on a device version 4.2.2, device 4.4.2 or emulator 4.2.2, all is working as expected (same with Ionic View on my 4.2.2 device)

  • But when trying on emulator of api 23 (I haven’t any device with android api 23), the application seems to have troubles to start, as the two toolbars remains empty.

So I am wondering whether this could be a problem with crosswalk, or if it could just be an emulator issue. Also, did anyone encountered a similar issue ?