Text gets cropped on Safari Mobile when using column-count and column-gap (CSS3)

Question

Here the code I'm using:

<ul>
<li>TEXT<br>TEXT</li>
<li>TEXT<br>TEXT</li>
<li>TEXT<br>TEXT</li>
</ul>


ul {
    -webkit-column-count: 3;
    -webkit-column-gap: 90px;
    column-count: 3;
    column-gap: 90px;
    -moz-column-count: 3;
    -moz-column-gap: 90px;
}

The problem is that with Safari Mobile the text after the <br> gets cropped (no problem with other browsers.. well, for IE < 10 I use a dirty hack but I don't care about it). Here's the page where you can reproduce the issue: http://goo.gl/ojWx9

And this is a screenshot from Safari Mobile:

Answer 1

The large column gap coupled with "white-space: nowrap" is causing the content to extend beyond the column. This causes the clipping bug in Mobile Safari.

You need to either reduce the column gap size to fit the text or allow linebreaks to resolve the issue.