Bug 121366
| Summary: | Wrong Column Width in Multicolumn Layout | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Cyber Hymnal™ <cyberhymnal> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | UNCONFIRMED | ||
| Severity: | Major | CC: | ahmad.saleem792, cyberhymnal, simon.fraser, zalan |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | PC | ||
| OS: | Windows 7 | ||
| URL: | https://jsfiddle.net/ao91mxbz/show | ||
Cyber Hymnal™
When a multicolumn <div> is enclosed in another <div> with display:table-cell, the column width is too small, causing text truncation. The following HTML illustrates the problem.
____________________________________________________
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Song of Haiawatha</title>
<style type="text/css">
.poem {
column-count: 2;
column-gap: 0;
column-rule: 2px solid gray;
-moz-column-count: 2;
-moz-column-gap: 0;
-moz-column-rule: 2px solid gray;
-webkit-column-count: 2;
-webkit-column-gap: 0;
-webkit-column-rule: 2px solid gray;
padding: 1em 0;
white-space: nowrap;
border: 8px ridge silver;
border-radius: 20px 20px 20px 20px;
}
div p { margin: 0 1em 2ex !important; }
figcaption { text-align:center; }
.cell { display: table-cell; vertical-align: middle; }
.row { display: table-row; }
.tbl { display: table; margin: auto; }
</style>
</head>
<body>
<p>So far, so good.</p>
<div class="poem">
<p>By the shore of Gitche Gumee,<br />
By the shining Big-Sea-Water,<br />
At the doorway of his wigwam,<br />
In the pleasant Summer morning,<br />
Hiawatha stood and waited.</p>
<p>All the air was full of freshness,<br />
All the earth was bright and joyous,<br />
And before him, through the sunshine,<br />
Westward toward the neighboring forest<br />
Passed in golden swarms the Ahmo,<br />
Passed the bees, the honey-makers,<br />
Burning, singing in the sunshine.</p>
<p>Bright above him shone the heavens,<br />
Level spread the lake before him;<br />
From its bosom leaped the sturgeon,<br />
Sparkling, flashing in the sunshine;<br />
On its margin the great forest<br />
Stood reflected in the water,<br />
Every tree-top had its shadow,<br />
Motionless beneath the water.</p>
</div>
<br />
<hr />
<p>Here’s where the problem happens: When the text is enclosed in a <code><div></code> with <code>display:table-cell</code>, Chrome truncates the text. Chrome seems to be computing an overall width big enough to hold the longest text line, resulting in a column width that is too narrow.</p>
<p>Firefox 23 & Internet Explorer 10 do not exhibit this problem.</p>
<div class="tbl"><div class="row"><div class="cell"><div class="poem">
<p>By the shore of Gitche Gumee,<br />
By the shining Big-Sea-Water,<br />
At the doorway of his wigwam,<br />
In the pleasant Summer morning,<br />
Hiawatha stood and waited.</p>
<p>All the air was full of freshness,<br />
All the earth was bright and joyous,<br />
And before him, through the sunshine,<br />
Westward toward the neighboring forest<br />
Passed in golden swarms the Ahmo,<br />
Passed the bees, the honey-makers,<br />
Burning, singing in the sunshine.</p>
<p>Bright above him shone the heavens,<br />
Level spread the lake before him;<br />
From its bosom leaped the sturgeon,<br />
Sparkling, flashing in the sunshine;<br />
On its margin the great forest<br />
Stood reflected in the water,<br />
Every tree-top had its shadow,<br />
Motionless beneath the water.</p>
</div></div></div></div>
</body>
</html>
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Cyber Hymnal™
*** Bug 120555 has been marked as a duplicate of this bug. ***
Ahmad Saleem
I changed Testcase from Comment 0 in JSFiddle with the link in URL field. Only bit I see different in Safari Technology Preview 166 is 'content distribution' and 'grey' broder issue.
Although I don't have column width is too small issue, which is this bug referring.
Should we rename this bug title or close this or have separate for above two issues?