Why don't elements display inline-block again after resizing and enlarging in Chrome?
I'm trying to prove that the wireframe can work promptly, resulting in list items 1-4 being displayed: the block on mobile and on desktop 1,3,5 are displayed next to each other.
I ran into a weird error only in Chrome whereby 1,3,5 elements do not redraw inline after resizing to a small breakpoint and over again.
Demo: http://jsfiddle.net/n0ocqf2w/3/
Full screen: https://jsfiddle.net/n0ocqf2w/3/embedded/result/
stackoverflow forces me to post the code using the jsfiddle link, so here are the styles we have in the game:
* {
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:
- Will open at a wide breakpoint, so the background of the body is black. Observe elements 1,3,5 entering the line.
- Resize browser to <400px, so the background of the body is white. Pay attention to points 1-4 of switching to the display: block.
- Resize the browser again so that the background of the body is black. Watch for details 1,3,5 does NOT line up again.
After a little digging, I found this very old bug that hasn't been fixed in 4 years: https://bugs.webkit.org/show_bug.cgi?id=53166
Can anyone confirm if this is being fixed? I really hope the open bug in the above link is missing here, but the criteria for not applying the display property in the media query after resizing is exactly: --(
Greetings
source to share
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;
}
}
source to share