Do not apply styles on some android devices

vladimirruzh · May 29, 2020, 12:24pm

On android, styles no longer apply.
Until a certain point, everything worked fine, but after adding new functionality - without new page. On one device ( android 7), some of the styles are not applied.

these pages used to display normally.
That’s what they should look like

ionic info:

Ionic:

Ionic CLI : 6.9.2 (C:\Users\my\AppData\Roaming\nvm\v10.13.0\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 4.11.10
@angular-devkit/build-angular : 0.13.8
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Capacitor:

Capacitor CLI : 1.0.0-beta.24
@capacitor/core : 1.0.0-beta.24

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.3, (and 33 other plugins)

Utility:

cordova-res : not installed
native-run : 1.0.0

System:

Android SDK Tools : 26.1.1 (C:\Users\my\AppData\Local\Android\Sdk)
NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10

ionic cordova plugin ls:

call-number 0.0.2 “Cordova Call Number Plugin”
com-badrit-base64 0.2.0 “Base64”
cordova-android-support-gradle-release 3.0.1 “cordova-android-support-gradle-release”
cordova-open-native-settings 1.5.2 “Native settings”
cordova-plugin-advanced-http 2.1.1 “Advanced HTTP plugin”
cordova-plugin-background-fetch 5.5.0 “CDVBackgroundFetch”
cordova-plugin-background-service 1.3.5 “cordova-plugin-background-service”
cordova-plugin-badge 0.8.8 “Badge”
cordova-plugin-camera 4.1.0 “Camera”
cordova-plugin-chooser 1.2.5 “Chooser”
cordova-plugin-crop 0.3.1 “CropPlugin”
cordova-plugin-datepicker 0.9.3 “DatePicker”
cordova-plugin-device 2.0.2 “Device”
cordova-plugin-external-storage 1.0.0 “External storage”
cordova-plugin-file 6.0.1 “File”
cordova-plugin-file-opener2 2.2.1 “File Opener2”
cordova-plugin-file-transfer 1.7.1 “File Transfer”
cordova-plugin-filechooser 1.2.0 “File Chooser”
cordova-plugin-filepath 1.5.5 “cordova-plugin-filepath”
cordova-plugin-filepicker 1.1.6 “File Picker”
cordova-plugin-geolocation 4.0.2 “Geolocation”
cordova-plugin-inappbrowser 3.1.0 “InAppBrowser”
cordova-plugin-ionic-keyboard 2.1.3 “cordova-plugin-ionic-keyboard”
cordova-plugin-ionic-webview 4.1.3 “cordova-plugin-ionic-webview”
cordova-plugin-ios-camera-permissions 1.2.0 “iOS Permissions”
cordova-plugin-local-notification 0.9.0-beta.2 “LocalNotification”
cordova-plugin-mauron85-background-geolocation 3.0.7 “CDVBackgroundGeolocation”
cordova-plugin-network-information 2.0.1 “Network Information”
cordova-plugin-request-location-accuracy 2.3.0 “Request Location Accuracy”
cordova-plugin-screen-orientation 3.0.2 “Screen Orientation”
cordova-plugin-settings-hook 0.2.7 “Cordova Settings Hooks”
cordova-plugin-splashscreen 5.0.2 “Splashscreen”
cordova-plugin-statusbar 2.4.2 “StatusBar”
cordova-plugin-telerik-imagepicker 2.3.3 “ImagePicker”
cordova-plugin-websql 0.0.10 “Web SQL plugin”
cordova-plugin-whitelist 1.3.4 “Whitelist”
cordova-sqlite-storage 5.0.0 “Cordova sqlite storage plugin - cordova-sqlite-storage plugin version”
cordova.plugins.diagnostic 5.0.1 “Diagnostic”
es6-promise-plugin 4.2.2 “Promise”
phonegap-plugin-barcodescanner 8.1.0 “BarcodeScanner”
sentry-cordova 0.17.0 “Sentry”

npm list --depth=0

±- @agm/core@1.0.0
±- @angular-devkit/architect@0.13.8
±- @angular-devkit/build-angular@0.13.8
±- @angular-devkit/core@7.3.9
±- @angular-devkit/schematics@7.3.9
±- @angular/cli@7.3.9
±- @angular/common@7.2.14
±- @angular/compiler@7.2.14
±- @angular/compiler-cli@7.2.14
±- UNMET PEER DEPENDENCY @angular/core@7.2.14
±- @angular/forms@7.2.14
±- @angular/http@7.2.14
±- @angular/language-service@7.2.14
±- @angular/platform-browser@7.2.14
±- @angular/platform-browser-dynamic@7.2.14
±- @angular/router@7.2.14
±- @capacitor/cli@1.0.0-beta.24
±- @capacitor/core@1.0.0-beta.24
±- @ionic-native/background-geolocation@5.17.1
±- @ionic-native/barcode-scanner@5.19.1
±- @ionic-native/base64@5.12.0
±- @ionic-native/call-number@5.13.0
±- @ionic-native/camera@5.25.0
±- @ionic-native/chooser@5.14.0
±- UNMET PEER DEPENDENCY @ionic-native/core@5.5.1
±- @ionic-native/crop@5.6.0
±- @ionic-native/date-picker@4.20.0
±- @ionic-native/diagnostic@5.20.0
±- @ionic-native/document-viewer@5.5.1
±- @ionic-native/file@5.0.0
±- @ionic-native/file-chooser@5.14.0
±- @ionic-native/file-opener@5.5.1
±- @ionic-native/file-path@5.0.0
±- @ionic-native/file-picker@5.18.0
±- @ionic-native/file-transfer@5.18.0
±- @ionic-native/geolocation@5.13.0
±- @ionic-native/http@5.11.0
±- @ionic-native/image-picker@5.20.0
±- @ionic-native/in-app-browser@5.14.0
±- @ionic-native/ionic-webview@5.6.0
±- @ionic-native/local-notifications@5.10.0
±- @ionic-native/location-accuracy@5.23.0
±- @ionic-native/network@5.7.0
±- @ionic-native/open-native-settings@5.23.0
±- @ionic-native/screen-orientation@5.12.0
±- @ionic-native/splash-screen@5.5.1
±- @ionic-native/sqlite@5.24.0
±- @ionic-native/status-bar@5.11.0
±- @ionic/angular@4.11.10
±- @ionic/angular-toolkit@1.5.1
±- @ionic/storage@2.2.0
±- @mauron85/cordova-plugin-background-geolocation@3.0.7
±- @ngrx/effects@8.0.1
±- @ngrx/entity@8.0.1
±- @ngrx/store@8.0.1
±- @ngrx/store-devtools@8.0.1
±- @types/jasmine@2.8.16
±- @types/jasminewd2@2.0.6
±- @types/node@10.14.6
±- angular2-signaturepad@2.9.0
±- base64-blob@1.4.1
±- call-number@1.0.1
±- codelyzer@4.5.0
±- com-badrit-base64@0.2.0
±- cordova@9.0.0
±- cordova-android@8.1.0
±- cordova-android-support-gradle-release@3.0.1
±- cordova-browser@6.0.0
±- cordova-ios@5.1.1
±- cordova-open-native-settings@1.5.2
±- cordova-plugin-add-swift-support@2.0.2
±- cordova-plugin-advanced-http@2.1.1
±- cordova-plugin-background-fetch@5.5.0
±- cordova-plugin-background-service@1.3.5
±- cordova-plugin-badge@0.8.8
±- cordova-plugin-camera@4.1.0
±- cordova-plugin-chooser@1.2.5
±- cordova-plugin-crop@0.4.0
±- cordova-plugin-datepicker@0.9.3
±- cordova-plugin-device@2.0.2
±- cordova-plugin-document-viewer@0.9.10
±- cordova-plugin-external-storage@1.0.0 (git+https://github.com/springcard/cordova-plugin-external-storage.git#2b010a1b3c7833b6c3a6c90ceb13505926115b68)
±- cordova-plugin-file@6.0.1
±- cordova-plugin-file-opener2@2.2.1
±- cordova-plugin-file-transfer@1.7.1
±- cordova-plugin-filechooser@1.2.0
±- cordova-plugin-filepath@1.5.5
±- cordova-plugin-filepicker@1.1.6
±- cordova-plugin-geolocation@4.0.2
±- cordova-plugin-inappbrowser@3.1.0
±- cordova-plugin-ionic-keyboard@2.1.3
±- cordova-plugin-ionic-webview@4.1.3
±- cordova-plugin-ios-camera-permissions@1.2.0
±- cordova-plugin-local-notification@0.9.0-beta.2
±- cordova-plugin-mauron85-background-geolocation@3.0.1
±- cordova-plugin-network-information@2.0.1
±- cordova-plugin-request-location-accuracy@2.3.0
±- cordova-plugin-screen-orientation@3.0.2
±- cordova-plugin-settings-hook@0.3.1
±- cordova-plugin-splashscreen@5.0.2
±- cordova-plugin-statusbar@2.4.2
±- cordova-plugin-telerik-imagepicker@2.3.3
±- cordova-plugin-websql@0.0.10
±- cordova-plugin-whitelist@1.3.4
±- cordova-sqlite-storage@5.0.0
±- cordova.plugins.diagnostic@5.0.1
±- core-js@2.6.5
±- es6-promise-plugin@4.2.2
±- file-to-array-buffer@1.0.0
±- ionic-native-http-connection-backend@5.0.4
±- jasmine-core@2.99.1
±- jasmine-spec-reporter@4.2.1
±- karma@4.1.0
±- karma-chrome-launcher@2.2.0
±- karma-coverage-istanbul-reporter@2.0.5
±- karma-jasmine@1.1.2
±- karma-jasmine-html-reporter@0.2.2
±- moment@2.24.0
±- mx.ferreyra.callnumber@0.0.2
±- ng2-pdf-viewer@5.2.4
±- ngx-autosize@1.6.3
±- node-version-compare@1.0.2
±- phonegap-plugin-barcodescanner@8.1.0
±- protractor@5.4.2
±- UNMET PEER DEPENDENCY react-native@>=0.28.0
±- react-native-background-fetch@2.6.0
±- UNMET PEER DEPENDENCY rxjs@6.5.1
±- sentry-cordova@0.17.0
±- signature_pad@3.0.0-beta.3
±- ts-node@8.1.0
±- tslib@1.9.3
±- tslint@5.16.0
±- typescript@3.1.6
`-- zone.js@0.8.29

mhartington · May 29, 2020, 5:00pm

Mmm not a lot to go off of from that.

Do you have an example of the styles that you are trying to apply and what platform/os version are you targeting?

vladimirruzh · June 1, 2020, 10:59am

it is html (orders.html)

<ion-content 
  class="box-area"
  scrollEvents = "true"
  (ionScroll)="scroll($event)"
  (ionScrollEnd)="ionScrollEnd($event)">

  <ion-refresher slot="fixed" (ionRefresh)="refresh(status, $event)">
  </ion-refresher>
  <div class="not-fount" *ngIf="(orderList$ | async)?.length == 0 && (filter$ | async)?.isFiltered">
    Nothing found
  </div>
  <div #orderList *ngFor="let order of orderList$ | async" 
    (click)="toItem(order, $event.target)"
    class="order orderView"
    [ngClass]="{
      'notViewOrder': !order?.view,
      'yellow-border-color': !order?.view && order?.status == 'ORDER',
      'green-border-color': !order?.view && order?.status == 'PICKED-UP'
    }">
    <ion-grid *ngIf="order?.vehicles" class="vehicles-title">
      <ion-row>
        <ion-col class="plus-icon">
          <img 
            (click)="order?.vehicles.length > 1 ? order.showVehicles = !order.showVehicles : ''"
            data-name="open"
            [ngClass]="{
              'yellow-filter': order.status == 'ORDER',
              'green-filter': order.status == 'PICKED-UP'
            }"
            src="assets/icon/{{order.showVehicles ? 'sub' : 'plus'}}-circle.svg">
        </ion-col>
        <ion-col class="content-row blod-font" *ngIf ="order?.vehicles?.length > 0">
          {{ order?.vehicles[0]?.year }}
          {{ order?.vehicles[0]?.make }}
          {{ order?.vehicles[0]?.model }}
        </ion-col>
        <ion-col class="vehicles-count-col">
          <div 
            [ngClass]="{
              'yellow-back': order.status == 'ORDER',
              'green-back': order.status == 'PICKED-UP'
            }"
            class="vehicles-count">
            {{ order?.vehicles?.length }}
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    <div class="vehicles-list-area" *ngIf="order.showVehicles && order?.vehicles?.length > 1">
      <ion-grid class="vehicles-list blod-font">
        <ng-template ngFor let-vehicle [ngForOf]="order?.vehicles" let-i="index">
          <ion-row *ngIf="i > 0">
            <ion-col>
              {{ vehicle?.year }}
              {{ vehicle?.make }}
              {{ vehicle?.model }}
            </ion-col>
          </ion-row>
        </ng-template>
      </ion-grid>
    </div>
    <div class="line">
      <hr/>
    </div>
    <div class="stops-area">
      <ion-grid>
        <ion-row>
          <ion-col>
            <div class="address blod-font">
              <img src="assets/icon/map-pin.svg">
              {{ order?.origin?.account?.address?.city }},
              {{ order?.origin?.account?.address?.state }}
            </div>
            <div class="date blod-font">
                <img  class="calendar-icon" src="assets/icon/calendar.svg">
                {{order?.origin?.originDate?.startDate | date:'MM/dd'}}
              <ng-template [ngIf]="
                order?.origin?.originDate?.dateDef == 'Estimated' &&
                order?.origin?.originDate?.endDate
              ">
                 - {{order?.origin?.originDate?.endDate | date:'MM/dd'}}
              </ng-template>
            </div>
          </ion-col>
          <ion-col>
            <div class="address blod-font">
              <img src="assets/icon/map-pin.svg">
              {{ order?.destination?.account?.address?.city }},
              {{ order?.destination?.account?.address?.state }}
            </div>
            <div class="date blod-font">
              <img  class="calendar-icon" src="assets/icon/calendar.svg">
              {{order?.destination?.destinationDate?.startDate | date:'MM/dd'}}
              <ng-template [ngIf]="
                order?.destination?.destinationDate?.dateDef == 'Estimated' &&
                order?.destination?.destinationDate?.endDate
              ">
                - {{order?.destination?.destinationDate?.endDate | date:'MM/dd'}}
              </ng-template>
            </div>      
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
    <ion-grid class="dispatcher-row blod-font">
      <ion-row class="ion-align-items-end ion-justify-content-end">
        <ion-col class="dispatcher-name">
          <span
            [ngClass] = "{
              'yellow-color': order.status == 'ORDER',
              'green-color': order.status == 'PICKED-UP'
            }">
            #{{order?.quoteNumber}}{{order?.ordering ? '.'+order?.ordering:''}}
          </span>
          <img 
            [ngClass] = "{
              'yellow-filter': order.status == 'ORDER',
              'green-filter': order.status == 'PICKED-UP'
            }"
            class="comfirmed yellow-filter" 
            src="assets/icon/check-mark.svg" 
            *ngIf = "order?.isConfirmed">
        </ion-col>
        <ion-col
          [ngClass] = "{
            'yellow-color': order.status == 'ORDER',
            'green-color': order.status == 'PICKED-UP'
          }" 
          class="price col-fit-content">
          <span>
            <ion-icon class="price-icon" name="logo-usd"></ion-icon>
            {{order?.carrier?.payment?.commission | myCurrency}}
          </span>
          {{
            (order?.carrier?.payment?.terms != 'COD' && order?.carrier?.payment?.terms != 'COP') ? 
            'BILL' : order?.carrier?.payment?.terms
          }}
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>

it is global.css. I use this file for tag ion-content

ion-content {
    --background: var(--background-color);
    color: var(--white);
    --padding-bottom: env(safe-area-inset-top);
}

it is css for component

.orderView {
    background-color: var(--white);
    color: var(--background-color);
}

ion-refresher {
    background-color: var(--background-color) !important;
}

.orderView .vehicles-title ion-icon {
    color: var(--yellow);
}

.orderView .vehicles-count {
    // background-color: var(--yellow);
    color: var(--white);
}

// .orderView .dispatcher-name span,
// .orderView .price {
//     color: var(--yellow);
// }

.orderView .dispatcher-name span {
    font-size: 4.5vw;
}

.orderView .stops-area .date {
    color: var(--grey);
}

// 
.order:first-child {
    margin-top: 2.96vh;
}

.order {  
    border-radius: 15px;
    margin-bottom: 2.96vh;
    padding-top:2vw;
    padding-bottom: 2vw;
    padding-left: 4vw;
    padding-right: 4vw;
    position: relative;
}

.notViewOrder {
    border-left: 1.6vw solid;
    // border-left-color: var(--yellow);
    padding-left: 2.4vw !important;
}

.line hr {
    background-color: var(--background-color);
    margin-right: 8.667vw;
    margin-left: 3.667vw;    
    margin-bottom: 10px;
    margin-top: 0px;
}

ion-content {
    --padding-end: 4.54vw;
    --padding-start: 4.54vw;
    --padding-bottom: 2.667vw;
}


ion-col {
    padding: 0px;
}

ion-grid {
    padding: 0px;
}

.vehicles-title {

    .content-row {
        padding-right: 3.7vw;
        padding-left: 3.7vw;
        font-size: 4vw;        
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .plus-icon {
        max-width: fit-content;
        img {
            width: 5.13vw;
            margin-top: 1px;
        }
    }

    .vehicles-count {
        height: 5.67vw;
        width: 5.67vw;
        border-radius: 50%;
        font-size: 3vw;
        font-weight: bold;
        text-align: center;
        padding-top: 0.75vw;
    }
    
    .vehicles-count-col {
        width: 6.4vw;
        max-width: fit-content;
    }
    
}
.vehicles-list-area {
    margin-bottom: 1vw;
    margin-top: 1vw;

    .vehicles-list {
        font-size: 4vw;
        
        ion-row {
            margin-bottom: 0.533vw;
        }
    }
}

.stops-area {
    
    .address {
        font-size: 3vw;
        text-align: left;
    }

    .date {
        font-size: 3vw;
        text-align: left;
    }
        
    img {
        width: 2.667vw;
        height: 3.2vw;
        margin-right: 0.533vw;
    }

    .calendar-icon {
        opacity: 0.5;
    }

    ion-col:first-child {
        padding-right: 0.533vw !important;
        border-right: 1px solid var(--background-color);
    }

    ion-col:last-child {
        padding-left: 0.533vw !important;
    }

    .header {
        margin-bottom: 1.333vw;
        font-size: 3.467vw;
        
        ion-col {
            padding-left: 4vw !important;
        }
    }
}

.dispatcher-row {
    font-size: 3.2vw;

    .price span {
        font-size: 5.333vw;
    }
    
    .price {
        text-align: right;
    }
    
    .comfirmed {
        height: 5.333vw;
        margin-left: 1.6vw;
        position: relative;
    }
}

vladimirruzh · June 1, 2020, 11:05am

I found here this discussion on the forum Ionic 3: Part of css not working on Android platform , but the solution that was there did not help me. Could not find the mayi.hss file. And those actions that they proposed to do in the decision led to the fact that after each build the application file grew larger and larger.

zerocool97 · June 1, 2020, 11:24am

Salut, moi aussi, j’ai le même problème et le style ne s’applique pas uniquement sur android 7. Les versions inférieures à 7 et supérieures 7, ça fonctionne très bien!