Search code examples
htmlcsswebkitblink

inline DIVs inside a container always pushing the last one into second line in WebKit

When trying to hand-made a slider, I noticed that, in Webkit/Blink (Chrome Desktop and Android stock browser), the last slide under my CSS will always be pushed into the next line, no matter how much slides in the container:

// dynamatically insert the "scene"s
// so no white space and/or line breaks occurs
[].forEach.call(document.querySelectorAll("div.container"),function(container){
    var scene;
    // number of children doesn't matter
    var all=Math.floor(Math.random()*15)+1;
    for(var i=0;i<all;i++){
        scene=document.createElement("div");
        scene.className="scene";
        scene.appendChild(document.createTextNode(i));
        container.appendChild(scene);
    }
});
div.container
{
    width:50px;
    overflow:visible;
    white-space:pre;
    outline:1px solid red;
}
div.container > div.scene
{
    width:100%;
    height:50px;
    background-image:linear-gradient(to bottom right, #FFF, #000);
    display:inline-block;
    vertical-align:top;
    font-size:20px;
    color:blue;
}
<!-- prepare the container -->
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

I also made a jsfiddle

This is what it looks like in three major browsers:

browser compare

Why is WebKit/Blink so special in this case, and how can I make them behave like Gecko/Trident?

Edit:

  • The width:50px in .container is just a convenience way to demonstrate the problem; in real product it's 100% viewport width, and width:100% in .scene is actually intended, instead of hard-coded 50px;
  • The .scenes in real product are usually images that I may not know their dimension before hand, so the height:50px here is just to make the output looks more "clean", and the height:auto in .container is intended.
Solution

  • UPDATE

    Maybe try white-space: nowrap; in .container to suppress text wrap and line breaks instead of white-space: pre; ( pre preserves new lines). Read more about white-space property here: http://developer.mozilla.org/en-US/docs/Web/CSS/white-space

    Note: No clear explanation why this works. Just that Chrome seemed to be wrapping the divs around for some reason. Probably a bug in chrome/webkit.