Why don't elements display inline-block again after a resize down and up in Chrome?

Question

I'm trying to prove a wireframe can work responsively, whereby list items 1-4 display:block on mobile, and on desktop 1,3,5 display inline next to each other.

I've encountered a weird bug only in Chrome, whereby the elements 1,3,5 don't re-render inline after a resize down to the small breakpoint and up again.

Demo: http://jsfiddle.net/n0ocqf2w/3/

Full Screen: https://jsfiddle.net/n0ocqf2w/3/embedded/result/

stackoverflow is making me post the code with the jsfiddle link, so here are the styles we have in play:

* {
    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%;
    }
}

Steps to replicate in Chrome:

1. Open at wide breakpoint, so body background is black. Observe items 1,3,5 rendering inline.
2. Resize browser down to < 400px, so body background is white. Observe items 1-4 switching to display:block.
3. Resize browser up again, so body background is black. Observe items 1,3,5 NOT lining up again.

After a bit of digging, I found this very old bug which hasn't been fixed in over 4 years: https://bugs.webkit.org/show_bug.cgi?id=53166

Could anyone please confirm if this is fixable? I'm really hoping the open bug in the above link isn't present here, but the criteria of not applying the display property in a media query after a resize matches exactly :-(

Cheers

Answer 1

Hope this helps. http://jsbin.com/bakujusaxu/1/edit?css,output

/*
  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;

    }

}