Webkit browsers renders multi-column layout contents wrong - css

Question

I have a two-column layout in a bootstrap modal. There should be a bootstrap dropdown button as the content. Firefox renders it correctly but webkit based browsers fail to display the button correctly. The button does not get hover or click events since its position is rendered wrong.
The question is: Am I doing something wrong? And is there a way to avoid this problem?
The jsfiddle is here: http://jsfiddle.net/cenap/mtpj8god/4/
Full screen: http://jsfiddle.net/cenap/mtpj8god/4/embedded/result/
.multicolumn-container {
width: 250px;
height: 300px;
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
-webkit-column-rule: 1px outset #CCC;
/* Chrome, Safari, Opera */
-moz-column-rule: 1px outset #CCC;
/* Firefox */
column-rule: 1px outset #CCC;
overflow: auto;
}
.box {
display: inline-block;
width: 100px;
min-height: 60px;
text-align: center;
border: 3px solid #666;
padding: 10px;
margin: 10px;
}
.err {
font-size: 8px;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="hero-unit">
<h1>Multicolumn in Bootstrap modal</h1>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Modal title</h4>
<div class='btn-group'>
<button class='btn btn-default btn-sm dropdown-toggle' data-toggle='dropdown'><span class='caret'></span>
</button>
<ul class='dropdown-menu' role='menu' aria-labelledby='dLabel'>
<li><a href='#'>Some Action</a>
</li>
<li class='divider'></li>
<li><a href='#'>Some Other Action</a>
</li>
</ul>
</div>
<--- This works but the ones in columns below do not render correctly in webkit. </div>
<div class="modal-body">
<div class="multicolumn-container">
<div class="box">1
<div class='btn-group'>
<button class='btn btn-default btn-sm dropdown-toggle' data-toggle='dropdown'><span class='caret'></span>
</button>
<ul class='dropdown-menu' role='menu' aria-labelledby='dLabel'>
<li><a href='#'>Some Action</a>
</li>
<li class='divider'></li>
<li><a href='#'>Some Other Action</a>
</li>
</ul>
</div>
<span class="err">This is rendered wrong in webkit browsers</span>
</div>
<div class="box">2
<div class='btn-group'>
<button class='btn btn-default btn-sm dropdown-toggle' data-toggle='dropdown'><span class='caret'></span>
</button>
<ul class='dropdown-menu' role='menu' aria-labelledby='dLabel'>
<li><a href='#'>Some Action</a>
</li>
<li class='divider'></li>
<li><a href='#'>Some Other Action</a>
</li>
</ul>
</div>
<span class="err">This is rendered wrong in webkit browsers</span>
</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Answer 1

its working fine on Mac OSX webkit browsers - Chrome 37+ and Safari 7+, as on Firefox 30+. Please specify the browser version.

Answer 2

It seems like there is a bug in Webkit and columns have been disabled for printing by its developer (Dave Hyatt) because page breaking couldn't be implemented properly. So the WebKit implementation have CSS3 columns turned off, but Firefox renders them correctly. I’ve tried making columns work for printing in Chrome, but still getting better results from Firefox. Also there are some posts by Dave Hyatt and one of them stating that “Columns are using the new pagination model, but printing isn't using it yet.”(https://bugs.webkit.org/show_bug.cgi?id=45993)

Answer 3

I know the question was asked over a year ago, but I found this worked for me.
-webkit-perspective: 1;
See http://jsfiddle.net/mtpj8god/6/
More about it (from http://caniuse.com/#search=column-count, in known issues):
Chrome is reported to incorrectly calculate the container height, and
often breaks on margins, padding, and can display 1px of the next
column at the bottom of the previous column. Part of these issues can
be solved by adding -webkit-perspective:1; to the column container.
This creates a new stacking context for the container, and apparently
causes chrome to (re)calculate column layout.