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!
Hi Sujan12,
It’s renamed but the item-left still works! I’m getting crazy with this because this problem with the grid is only happening when in prod mode.
As i could inspect the problem is the col. Anything inside the cols are overlapping the boundaries of the col. Have you ever seen this? I will try to take a snapshot of the inspector and the app screen!
Here’s my screen with the col highlighted in the dev mode (correct)
Here’s the wrong one in prod mode
I would advise you to rebuild your UI code from scratch and check the docs of each and every component you use. Something is strange here - but I have no idea what.
The worst thing is that if I grab the main.css from the dev build and put it directly into the platform www/build and run again from xcode (not the cli) it works perfectly!
Then compare the dev and prod css files! (Maybe beautify first of course)
I need to build in prod because the difference in boot time is considerable (like 11 secs) but the good thing is that the sizes of the dev css (1.6mb) and the prod css (1.3mb) is not something to be so worried, i guess! anyway i’ll try to compare both files and let’s see!
Thanks so much! and if I find the error / solution i’ll share it here!!
One thing you might investigate, especially if this is iOS-version-specific, is using the wkwebview engine.
the thing is that this problem is on IOS 8.4 and as far as I read the wkwebview is ios 9 and 10! I haven’t tried yet!
@tattivitorino, I just started getting a similar problem with --prod builds.
I’m actually building for the browser: ionic cordova build browser --prod
The prod CSS is messed up and doesn’t apply properly. Like you, if I replace the .css file with the dev version everything works fine. In another project, though, after building for --prod I get a runtime JS error.
I suspect there’s a bug in the latest versions of ionic-related packages, most likely in @ionic/app-scripts, but I have to confirm. It could very well be the uglifyjs step that is now messed up.
I don’t think your problem is specifically related to iOS.
I’ll keep this thread updated on my finding, but please post yours as well. Thank you!
From the looks this has nothing to do with the vendor.js changes directly but something else in app-scripts 2.x - a lot changed in the background.
Yes, the problem is NOT present in 2.0.0, but surfaced in 2.0.2. Those two github issues are the closest I found to help tracking this down. For now, I’ve downgraded to 2.0.0 - can’t give this more time ATM.
