1

.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!

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Mike Legacy
  • 1,056
  • 1
  • 10
  • 24

1 Answers1

1

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

Mike Legacy
  • 1,056
  • 1
  • 10
  • 24