Deuxième bug sur WebKit avec column-count

by oilvier

HTML

<ul>
    <li>1</li>
</ul>

<ul class="padding">
    <li>1</li>
</ul>

<ul>
    <li>
        <div>1</div>
    </li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<ul class="padding">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

ul {font-family:Arial; list-style:none; margin:0; padding:0;}

ul {
    -webkit-column-count:4;
    -moz-column-count:4;
    column-count:4;
    -webkit-column-gap: 20px; 
    -moz-column-gap: 20px; 
    column-gap: 20px; 
    -webkit-column-rule: 1px dashed #c4c8cc;
    -moz-column-rule: 1px dashed #c4c8cc;
    column-rule: 1px dashed #c4c8cc;
    margin-bottom:20px;
}

li {background:beige;}

.padding li, div {padding:10px;}

JavaScript

/** 
 * Nouveau bug sur WebKit avec `column-count`:
 * Si un élément unique transformé en colonne a un padding ou contient un élément avec un padding (!), voilà ce qu'il se passe
 **/