<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Redering flexbox children across columns"
href="https://bugs.webkit.org/show_bug.cgi?id=164166">164166</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Redering flexbox children across columns
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>All
</td>
</tr>
<tr>
<th>OS</th>
<td>All
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Major
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Layout and Rendering
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>dsongman@dannywillia.ms
</td>
</tr>
<tr>
<th>CC</th>
<td>simon.fraser@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=293248" name="attach_293248" title="Screen capture of rendering">attachment 293248</a> <a href="attachment.cgi?id=293248&action=edit" title="Screen capture of rendering">[details]</a></span>
Screen capture of rendering
I've encountered an issue where Webkit is rendering text across columns (meaning the top portions of characters render at the bottom of the 1st column and the bottom portion of the characters render in the top of the 2nd column).
<a href="http://codepen.io/dsongman/pen/ORYeEa">http://codepen.io/dsongman/pen/ORYeEa</a>
The DOM structure looks like
<div class="wrapper">
<div class="row">
<label>Label</label><input type="text">
</div>
... (more rows with same structure) ...
</div>
And CSS is:
.wrapper {
column-count: 2
}
.row {
display: flex;
}
The demo has 5 rows. The third row will render partially in both columns.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>