Ant-design-mobile: 关于 九宫格 Grid 在ios8.*系统中flex显示的bug

[guyuleo]

Version

1.0.7

Environment

IOS 8.*

Reproduction link

http://blm.test.otosaas.com/chongzhi

Steps to reproduce

载入完后，显示问题，原本应该是九宫格显示，可是变成一行显示，并且可左右滑动。

What is expected?

九宫格显示

What is actually happening?

一行显示，可以左右滑动。

[paranoidjk]

@warmhug flex-wrap 在ios8 有兼容性问题吗？

[paranoidjk]

@gutenye 请升级到最新版 1.1.0 试试，看了下你的demo少了 -webkit-flex-wrap 样式

[paranoidjk]

@gutenye

• 这是你的样式

.am-flexbox.am-flexbox-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

• 这是antd-mobile的样式

.am-flexbox.am-flexbox-wrap {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

应该与你项目的构建环境有关： https://github.com/postcss/autoprefixer/issues/766

[gutenye]

cc @guyuleo, not me 😞

[wengqi]

如果你是使用create-react-app搭建的项目，并且使用react-app-rewired来覆盖默认配置的方式，请参考以下解决方案：

在config-overrides.js注意以下几个关键点：
1、使用config.module.rules[1].oneOf.push，注意是push而不是unshift
2、配置中的browsers增加一项'iOS >= 8'
3、为了防止出现报错请在文件最开始增加 const autoprefixer = require('autoprefixer'); 否则会出现autoprefixer未定义。
只要检查下以上三点，其余都可以照搬此项目示例中的配置。

详细解释如下：
如果你去看creat-react-app默认隐藏在/node_modules/react-scripts/config/webpack.config.prod.js或webpack.config.dev.js中的配置，你会发现我们在config-overrides.js写的config.module.rules[1].oneOf.push其实是在往webpack.config.prod.js或者webpack.config.dev.js的module对象的rules数组中增加一项规则，而特别重要的是webpack在执行这个数组中的规则时，不是按照你配置的从前往后的顺序执行的，而且从后往前执行，而且oneOf意思是执行第一次匹配到的规则，即假如有两条规则同时匹配，只会执行第一次匹配的，忽略第二条。所以我们在config-overrides.js配置的规则要想覆盖默认配置，必须push到rules数组最后，使用unshift是不能覆盖的。碰巧的是less规则在默认配置中没有，所以无论是push还是unshift都无所谓，但是css规则就没那么幸运了，因为默认规则是有css这条规则的，所以无论你在config-overrides.js如何修改，其实都没有被执行，还是走的creat-react-app的默认配置。
对于：配置中的browsers增加一项'iOS >= 8' 这就不做详细说明了，让ios系统降低到8以上就是让autoprefixer增加-webkit-flex。
希望对你有帮助，如果还是不正确可以联系我。