Html 为什么不'；在Chrome中向下和向上调整大小后，t元素再次显示内联块？

我试图证明线框可以起到相应的作用，即列表项1-4在移动设备上显示：block，在桌面上1,3,5并排显示

我只在Chrome中遇到了一个奇怪的错误，即元素1、3、5在调整大小到小断点后不会重新内联渲染

演示：

全屏：

stackoverflow让我用JSFIDLE链接发布代码，下面是我们正在使用的样式：

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
}
ul {
    margin: 50px 0 0 0;
    padding: 0;
    font-size: 0;
    white-space: nowrap;
}
li {
    display: block;
    margin: 0;
    padding: 10px 50px;
    height: 40px;
    background: red;
    font-size: 12px;
    position: relative;
    z-index: 2;

    display: block;
    width: 100%;
}
li:nth-child(1) {
    background: red;
}
li:nth-child(2) {
    background: pink;
}
li:nth-child(3) {
    background: blue;
}
li:nth-child(4) {
    background: lightBlue;
}
li:nth-child(5) {
    background: green;
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
}

@media screen and (min-width:400px) {
    body {
        background: black;
    }
    ul {
        margin: 0;
    }
    li {
        display: inline-block;
        width: 20%;
        vertical-align: top;
    }
    li:nth-child(2) {
        background: pink;
        position: fixed;
        top: 35px;
        left: 0;
        width: 100%;
        z-index: 1;
        opacity: .5;
    }

    li:nth-child(4) {
        background: lightBlue;
        position: fixed;
        top: 45px;
        left: 20px;
        width: 100%;
        z-index: 1;
        opacity: .5;
    }
    li:nth-child(5) {
        background: green;
        position: relative;
        width: 20%;
    }
}

在Chrome中复制的步骤：

在宽断点处打开，因此主体背景为黑色。遵守第1、3、5项

将浏览器调整到<400px，使主体背景为白色。遵守项目1-4切换至显示：块

再次向上调整浏览器大小，使主体背景为黑色。遵守第1、3、5项，不要再次对齐

经过一番挖掘，我发现了一个非常老的bug，它已经4年多没有被修复了：

有人能确认这是否可以解决吗？我真的希望上面链接中的open bug不会出现在这里，但是在调整大小后不在媒体查询中应用display属性的条件完全匹配：-(

干杯

希望这有帮助。

---

再加上我最后的想法，webkit的bug似乎已经修复，因为他们的演示对我来说已经修复了。

/*
  SOLUTION HERE

  The following elements are being treated as a "clearfix" type of thing, so when you re-size from "mobile" to "desktop" the fixed position elements are being treated as "block", as they happen to be intersected elements, it gives the stacked result... 
*/

@media screen and (min-width:400px) {
    li:nth-child(2),
    li:nth-child(4) {
      /*
      The bug is a re-drawing bug. Not your fault, but the browser's.
      The ideal solution, would be to set this to inline, but that doesn't work.
      So you can set it to the following values:
      none
      flex
      table
      list-item
      */
      display: flex;

    }

}