One of the things I really hate is when my application running in gulp serve looks totally different from the application running with gulp serve:dist. The second one does a production build and then runs that, and sometimes with the minification and concatenation things gets messed up (usually it's that dang css). Anyway, this post is about how I fixed the z-index issue that is related to this.
The Problem
The problem is that cssnano (one of the plugins in the build step of the Gulp-Angular generated project) was actually changing the z-index values in the css! For example, in my code I would give something a z-index of 300. It would have that z-index when I select the element with the chrome dev tools inpector when running gulp serve, but when running gulp serve:dist it would change the z-index to something weird like 16. This would have been such a big deal if it kept the order of everything as I had it, but some things were in front of things that shouldn't have been so it just looked terrible.
The Solution
The first part of the solution is to realize that is the "cssnano" step in your build process that it causing the problems here. Then you need to change the code to have it ignore z-indices. I followed the advice from the github issue thread here and here. Basically, it comes down to this:
In the file for your gulp build task (gulp-angular names it build.js) you simply update this line of code:
.pipe($.cssnano())
to look like this:
.pipe($.cssnano({zindex: false}))
And then you're golden! :)
RSS Feed