基于 Flexbox 的 CSS 无法在任何 iOS 浏览器上运行

Question

我正在为我的网站使用 Jade、Stylus 和 Node JS。它在桌面 Chrome、Firefox、IE 和 Edge 上运行良好。它在 Android Chrome 和浏览器上运行良好。它在 iOS Chrome 或 Safari 上无法正常运行，在两者上都显示出类似的故障。它也不适用于桌面上的 Safari。它似乎适用于 iOS9，但不适用于 iOS8 或更低版本。

这是一张屏幕截图，显示 Android 上的移动设备 Chrome 和 iOS 上的移动设备 Chrome 之间的区别。 http://imgur.com/a/kjU23

即使我明确地放置了 -webkit-，并且 nib 正在编译的 CSS 中生成 -webkit- 前缀，为什么它在移动 iOS 浏览器上不起作用？这是我在 Github 上的完整 CSS。 https://github.com/Connorelsea/LSMSA-SGO-Website/tree/master/public/css

用于测试和演示的实时网站在这里：http://www.lsmsaSGO.com

该网站完整的 Stylus 代码有几千行，但示例如下。我的触控笔代码：

.addMore
    text-align center

    .multButtons
        width 100%
        display -webkit-flex
        display flex
        justify-content center
        -webkit-justify-content center
        align-items center
        -webkit-align-items center
        flex-direction column
        -webkit-flex-direction column

使用 Stylus 和 Nib 编译CSS。

  .addMore {
    text-align: center;
  }
  .addMore .multButtons {
    width: 100%;
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-align-items: center;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-direction: column;
  }

Answer 1

我猜这可能出于多种原因而发生。但是您知道您可以查看设备生成的 HTML 输出吗？如果不是：在 iphone/ipad 模拟器（不是实际设备）上加载页面。然后，在 mac 上打开 Safari（同样不是在设备上）。在工具栏中转到首选项 > 高级和 select "Show Develop menu in menu bar".

然后 select 开发 > 模拟器和 select 相应的网页。通过一些调查，您应该能够找到为设备生成的确切输出。

我遇到过几次这样的问题，通常我只能使用上述方法调试它们。

更新 1 (iOS9): 实际上。 Here's a link to the generated source code. 这是页面在 iPhone 5 模拟器上的样子：

更新 2 (iOS8):

这是运行osiOS8。 Here's a link to the source

Answer 2

关闭 .issueContainer 上的 flex 似乎可以解决我的问题。

.issueContainer {
    /* display: -webkit-flex; */
    /* display: flex; */
    /* flex-direction: row; */
    /* align-items: center; */
}

.issueContainer 不需要 flexbox 来使其子级堆叠，因为这是默认行为。

Answer 3

使用 Autoprefixer CSS online，您将获得 CSS 规则的所有当前供应商前缀。这是您将获得的结果：

.addMore .multButtons {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }

基于 Flexbox 的 CSS 无法在任何 iOS 浏览器上运行

Flexbox-based CSS not functioning on any iOS browser

html

ios

css

responsive-design

stylus