使用了flex布局的组件在老版本ios系统上显示不正常

[and218]

• antd-mobile 版本：^2.0.2
• 操作系统及其版本：ios8.1.1
• 通过create-react-app来创建项目，使用了antd-mobile-samples/create-react-app/config-overrides.js来修改配置。在ios8.1.1下，Grid、ActivityIndicator等组件均显示异常，研究发现，生成的flex相关样式只有-ms前缀，未能兼容webkit内核。我把autoprefixer的配置做了修改，也没有生效。

              // 修改前
              autoprefixer({
                browsers: [
                  '>1%',
                  'last 4 versions',
                  'Firefox ESR',
                  'not ie < 9', // React doesn't support IE8 anyway
                ],
                flexbox: 'no-2009',
              }),

             // 修改后
              autoprefixer({
                browsers: [
                  '> 0.3%',
                  // '>10%',
                  'iOS >= 8',
                  'Android >= 4',
                  // 'Android >= 4.1',
                  'last 7 versions',
                  // 'Firefox ESR',
                  'not ie < 9', // React doesn't support IE8 anyway
                ],
                // flexbox: 'no-2009',
                flexbox: true,
                // remove: false,
              }),

已经花了很长时间找解决方案，但都没奏效，我该怎么做？

[tuihou123321]

我也遇到这个问题

[wengqi]

在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。
希望对你有帮助，如果还是不正确可以联系我。