Foundation-sites: CSS Nano bug

[brightonmike]

1. Download, run Foundation Zurb Template
2. Create a Menu component or other Flexbox component/layout
3. Test on an iPhone/iPad

What did you expect to happen?

Layout would display correctly.

What happened instead?

Something bugs out with the Sass compiling. Instead of display:-webkit-flex, you end up with display:-webkit-box. This breaks any flexbox layout that uses flex-wrap:wrap on iOS devices.

By default, I always add the same browser support to CSS Nano that I do to autoprefixer, to stop it removing prefixes I need. Seems counter-intuitive to strip out prefixes I had already specifically asked to add, but I digress.

My only fix was to completely remove CSS Nano, now flexbox works correctly on any device. Though of course, now my CSS isn't minified.

[kball]

Just to make sure, are you setting the $global-flexbox variable to true? Do you have a sample repo exhibiting the bug? Thanks!

[darinronne]

I am having a similar issue. I am using the Foundation 6 ZURB Template.

I do have $global-flexbox: true;
and in app.scss "foundation-grid" is commented out and "foundation-flex-grid" is un-commented, as is "foundation-flex-classes".

These are the styles for a row in the Development CSS:
.row {
max-width: 85.71429rem;
margin-right: auto;
margin-left: auto;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}

These are the styles for a row in the Production CSS:
.row {
max-width: 85.71429rem;
margin-right: auto;
margin-left: auto;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}

The -webkit- styles are being removed. Which is causing rendering issues in Safari on Mac OS Yosemite and older and who knows where else.

I tried editing the COMPATIBILITY settings in config.yml, but that didn't work.
I tried increasing the amount of last versions and tried "safari >= 7".

[IamManchanda]

cc / @ben-eb
( Ben, can we get some help out of you buddy )

[ben-eb]

@IamManchanda Try excluding autoprefixer from the transforms, with this options object - {autoprefixer: false}. 😄

[darinronne]

That worked. Thanks. I added that to my gulpfile.babel.js file.

.pipe($.if(PRODUCTION, $.cssnano({autoprefixer: false})))

Seems like this should be the default setting. What's the point of specifying Autoprefixer compatibility if cssnano just removes it?

[ben-eb]

@darinronne I'm changing this behaviour in the next major release, it is a known issue. :smile:

https://github.com/ben-eb/cssnano/issues/252

[brettsmason]

This appears to of been a cssnano issue which has since been changed.