.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}So...bit of a weird issue. We have recently adopted Bootstrap 4 and the Flex model at my company, and we are noticing some weirdness when Bootstrap and Autoprefixer work in tandem.
Specifically, iPad version 8 or below just isn't having ANY of it. I know the specific attribute at fault, it's display: -webkit-box;. I can add /* autoprefixer: off */ to the selector (.row) at fault to prevent all autoprefixing on that class, but I really don't want to change the bootstrap core files, and I'm thinking it would be wise to leave the rest of the prefixes for other browser support.
I can't think of a way to gracefully override/remove that display: -webkit-box attribute specifically. Any ideas from the audience? Is there some customization within autoprefixer that I'm missing? Answers appreciated in advance!
Found it, it was right in front of my face, as I figured it was.
Autoprefixer has an option you can add to the gulp task:
flexbox: "no-2009",
Add that and it keeps the -ms-flexbox and -ms-flex-wrap attributes and removes the display: -webkit-box one.
Hopefully this helps anyone struggling in the future.
Check the "Disabling" section on the Github readme for Autoprefixer: https://github.com/postcss/autoprefixer#disabling