CSS issues when building in --prod mode

@tattivitorino wrote:

Hello everybody..

I am having a problem with the Grid System when building my app in --prod mode on IOS 8.4. If I build without the --prod flag everything works great and this doesn't happen on IOS 9.xx. or Android!

Safari developer tools shows a few warnigs according to the following:
.grid{display:flex} "the value flex is not supported for this property"
.fab-list-active, .grid{display:-webkit-flex;display:-webkit-box} "duplicate property display"
The markup for the Grids is the basic:

<ion-grid>
<ion-row>
<ion-col col-12 col-sm-6>
</ion-col>
<ion-col col-12 col-sm-6>
</ion-col>
</ion-row>
</ion-grid>

There is also a strange behaviour with the buttons (items) in the side menu: the icons are not on the left as item-left it is supposed to.
Here's the buttons markup:

<button ion-item *ngFor="let page of pages"
[ngClass]="isActive(page)"
(tap)="openPage(page)">
<ion-icon item-left [name]="page.icon"></ion-icon>
{{page.title}}
</button>

System infos:
global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 7.0.1
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.12
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 6.2.3 ios 4.3.1
Ionic Framework                 : ionic-angular 3.5.0

System:

Node       : v6.5.0
OS         : OS X El Capitan
Xcode      : Xcode 8.1 Build version 8B62
ios-deploy : 1.9.1
ios-sim    : 5.0.13
npm        : 3.10.3

Tested on:
iPhone 5s - IOS 8.4 (here lies the problem)
iPad 2 - IOS 9.3.4 (no problem)
LG V400 - Android 5.0.2 (no problem)

Any help will be very much appreciated!

Posts: 1

Participants: 1

Read full topic