flex/column/wrap grows the size of the first column every time the dom elements change places
Reported by
bjornste...@gmail.com,
Apr 27 2016
|
|||||||
Issue description
Chrome Version : 52.0.2717.0 (Official Build) canary (32-bit)
URLs (if applicable) :
Other browsers tested: FF 45.0.2, IE
Add OK or FAIL, along with the version, after other browsers where you
have tested this issue:
Safari: -
Firefox: OK
IE: OK
What steps will reproduce the problem?
(1) See below for full description and JSFiddle
(2)
(3)
What is the expected result?
Items are sorted and visual layout remains.
What happens instead?
First column grows every time items are sorted.
Please provide any additional information below. Attach a screenshot if
possible.
From: http://stackoverflow.com/questions/36263952/width-of-a-flexbox-column-grows-when-i-sort-it-only-in-chrome
and: https://github.com/philipwalton/flexbugs/issues/143
I have an array corresponding to items that are displayed in a flex container. The html looks like this:
<div class="body">
<section id="s1" class="package">1</section>
<section id="s2" class="package">2</section>
...
</div>
and CSS:
.body {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
I collect an array, sectionids containing the ids of all <section> elements, and sort this array. To re-display the sections in sorted order I do an insertion sort on the dom nodes so they end up in array order:
function redisplay() {
for (var i=1; i < sectionids.length; i++) {
$(sectionids[i]).insertAfter($(sectionids[i-1]));
}
}
JSFiddle: https://jsfiddle.net/67urtLa8/7/
This works great on IE, Edge, and FF, but on Chrome the width of the first column grows every time you sort. The size pops back to where it is supposed to be if I resize the browser, but not if I issue a window.resizeBy/To.
I've found a horrible hack that works (calling the function below after redisplay()), but it seems rather fragile (e.g. extracting $b.width() into a variable doesn't work):
function fix_chrome() {
var $b = $('.body');
$b.width($b.width() + 1);
$b.width($b.width() - 1);
}
,
Apr 28 2016
ssamanoori, I'm sure the relevant patch is in the blink roll: https://chromium.googlesource.com/chromium/src/+/8db1eb827c92bb36cd6853d97c8edf77026fb89a Do you know the easiest way to convert from the perf/dashboard svn range linked there to a modern gitiles range? If so, could you share it with me?
,
May 2 2016
,
May 2 2016
165144 = b7ef0ded5669ac7a6dd97bfdb312c303e9355738 165201 = 14fdc918524a19d41b5a1fe4e955d051bc498bae -> blink range: https://chromium.googlesource.com/chromium/src/+log/b7ef0ded5669ac7a6dd97bfdb312c303e9355738..14fdc918524a19d41b5a1fe4e955d051bc498bae (I'm doing this the annoying way -- do "git log" in src/, then in less do /@165201, wait for it to show up. repeat for the other revision)
,
May 2 2016
(dgrogan: see my answer above) Probably Levi's https://chromium.googlesource.com/chromium/src/+/2b50c49e531a6af2e4b54a3e190d1f96d72206d9 Will keep investigating...
,
May 3 2016
I think my case is closely related to this. It's certainly fixed by the same hack of jiggling the width. https://bugs.chromium.org/p/chromium/issues/detail?id=607856
,
Jun 1 2016
Moving this nonessential bug to the next milestone. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jun 27 2016
,
Jun 29 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/c83fe889c7045ad03b0b0a2e8d4fdcf1330d29ce commit c83fe889c7045ad03b0b0a2e8d4fdcf1330d29ce Author: cbiesinger <cbiesinger@chromium.org> Date: Wed Jun 29 21:06:44 2016 [css-flexbox] childIntrinsicWidth needs to actually return the intrinsic width This function is used to determine the cross size of a flex line. If we just use .width() then it is potentially affected by a previous layout where we already stretched the child. To avoid that, switch to maxPreferredLogicalWidth() -- we already use that in childIntrinsicHeight, and we also use intrinsicContentLogicalHeight() for the height case. However, if we have a non-auto width, we can't necessarily just call maxPreferredLogicalWidth; the preferred width may not have percentages correctly resolved, for example. TEST=css3/flexbox/wrapping-column-dynamic-changes.html BUG= 607856 , 607262 Review-Url: https://codereview.chromium.org/2104123002 Cr-Commit-Position: refs/heads/master@{#402932} [add] https://crrev.com/c83fe889c7045ad03b0b0a2e8d4fdcf1330d29ce/third_party/WebKit/LayoutTests/css3/flexbox/wrapping-column-dynamic-changes.html [modify] https://crrev.com/c83fe889c7045ad03b0b0a2e8d4fdcf1330d29ce/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp
,
Jun 29 2016
|
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by ssamanoori@chromium.org
, Apr 28 2016Labels: -Type-Bug hasbisect M-52 OS-Linux OS-Mac OS-Windows Type-Bug-Regression
Status: Untriaged (was: Unconfirmed)