New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 291616 link

Starred by 12 users

Issue metadata

Status: Fixed
Owner:
NOT IN USE
Closed: Aug 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug

Blocking:
issue 463348



Sign in to add a comment

Incorrect (top:auto) absolute positioning within columns

Reported by matma.rex@gmail.com, Sep 14 2013

Issue description

Chrome Version       : 30.0.1599.37
OS Version: 5.1 (Windows XP)
URLs (if applicable) : https://users.v-lo.krakow.pl/~matmarex/columns-position-testcase.html
Other browsers tested:
Add OK or FAIL after other browsers where you have tested this issue:
     Safari 5: FAIL (affects WebKit as well)
  Firefox 4.x: OK
     IE 7/8/9: (inapplicable, no support)
     Opera 12: OK

What steps will reproduce the problem?
1. Visit https://users.v-lo.krakow.pl/~matmarex/columns-position-testcase.html for the testcase.

What is the expected result?
The red text is shown next to the "Right here:" marker.

What happens instead of that?
The red text is shown at the bottom of the page, as if the column layout wasn't applied.


Correct rendering:   http://i.imgur.com/pW0JzAr.png (Opera 12)
Incorrect rendering: http://i.imgur.com/vcsY1Mr.png (Opera 17)

 

Comment 1 by matma.rex@gmail.com, Sep 14 2013

Discovery story: https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Scrolling_past_the_bottom_of_the_page...

I'd mark this bug with the "Cr-Blink" label as suggested on http://www.chromium.org/blink , but it seems I don't have the necessary permissions (or the option is very well-hidden).
Labels: -OS-Windows OS-All M-31 Cr-Blink-HTML
Status: Untriaged
Able to reproduce the issue. This is a Non-Regression Issue. Can be seen from M24 builds.

Note: Working fine in FF.

Comment 3 by tkent@chromium.org, Sep 17 2013

Labels: -Cr-Blink-HTML Cr-Blink-Rendering

Comment 4 by sits...@gmail.com, Sep 21 2013

Bah, I've just reduced the Wikipedia problem down to this exact testcase and found someone beat me to it days ago...

For what it's worth, IE10 and IE11 also display the correct rendering. 
Project Member

Comment 5 by bugdroid1@chromium.org, Sep 27 2013

Labels: -M-31 M-32 MovedFrom-31
Moving all non essential bugs to the next Milestone.

Comment 6 by kareng@google.com, Nov 8 2013

Labels: -M-32 MovedFrom-32
This issue has already been moved once and is lower than Priority 1,therefore removing mstone.
i know i'm not supposed to post "me too" posts, but this bug remains untriaged and isn't as low a priority as you think. if you have any absolutely positioned elements within a column, it throws the entire layout off, which makes using columns impossible in some instances. there is no way to mitigate this behavior within the constraints of using columns, so i have to resort to using floats (or tables! GASP)

please fix this so i don't have to use tables for layout. think of the children.
For posterity, here's the complete HTML of the testcase:

<div style="width: 200px; border: 1px solid blue; -webkit-column-count: 2; column-count: 2;">
<p>Test.
<p>Test.
<p>Test.
<p>Test.
<p>Test.
<p>Test.
<p>Test.
<p>Test.
<p>Test.
<p>Test.
<p>Test.
<p>Test.
<p>Right here: <span style="position: absolute; color: red;">red</span>
<p>Test.
<p>Test.
<p>Test.
<p>Test.
</div>
Cc: msten...@opera.com ande...@opera.com
Labels: Cr-Blink-Render-Multicolumn
Status: Available
We are revamping our implementation of multi-column which may help with that. Adding people involved in that effort.

Comment 10 by ande...@opera.com, Jul 7 2014

Looks like revamped multicol also has this bug.
This is a somewhat more dramatic example -- the problem remains in both Safari and Chrome, not a problem in firefox.  It appears that the default absolute position is computed as if the layout were single column, i.e. the second column absolute position elements are all placed beneath the first column, farther down the second column leaves one farther down below the first column.  In my production version, this is, of course, way off the screen so it seems to have simply disappeared.
multicolumnabsposexample.html
2.0 KB View Download
Labels: -Cr-Blink-Rendering Cr-Blink-Layout
Migrate from Cr-Blink-Rendering to Cr-Blink-Layout
Blocking: chromium:463348

Comment 14 by tkent@chromium.org, Jul 12 2015

Labels: -Cr-Blink-Render-Multicolumn -Cr-Blink-Layout Cr-Blink-Layout-MultiCol
Owner: msten...@opera.com
Summary: Incorrect (top:auto) absolute positioning within columns (was: Incorrect absolute positioning within columns)
Project Member

Comment 16 by bugdroid1@chromium.org, Aug 16 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9

commit 57b66b0901dfcd97ed669a3635c55fbb6cc01fc9
Author: mstensho <mstensho@opera.com>
Date: Tue Aug 16 23:35:15 2016

Handle auto-positioned out-of-flow objects inside multicol containers correctly.

We used to get it all wrong for out-of-flow children of multicol containers
whose containing block were on the outside of the multicol container. Those
do not live in the flow thread coordinate space, so we have to convert their
location to visual coordinates.

BUG= 291616 

Review-Url: https://codereview.chromium.org/2250713002
Cr-Commit-Position: refs/heads/master@{#412375}

[add] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/LayoutTests/fast/multicol/out-of-flow/abspos-auto-left-right-expected.html
[add] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/LayoutTests/fast/multicol/out-of-flow/abspos-auto-left-right.html
[add] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/LayoutTests/fast/multicol/out-of-flow/abspos-auto-position-expected.html
[add] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/LayoutTests/fast/multicol/out-of-flow/abspos-auto-position-on-line-expected.html
[add] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/LayoutTests/fast/multicol/out-of-flow/abspos-auto-position-on-line-rtl-expected.html
[add] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/LayoutTests/fast/multicol/out-of-flow/abspos-auto-position-on-line-rtl.html
[add] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/LayoutTests/fast/multicol/out-of-flow/abspos-auto-position-on-line.html
[add] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/LayoutTests/fast/multicol/out-of-flow/abspos-auto-position.html
[add] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/LayoutTests/fast/multicol/out-of-flow/abspos-auto-top-bottom-expected.html
[add] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/LayoutTests/fast/multicol/out-of-flow/abspos-auto-top-bottom.html
[add] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/LayoutTests/fast/multicol/out-of-flow/nested-multicol-expected.html
[add] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/LayoutTests/fast/multicol/out-of-flow/nested-multicol.html
[add] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/LayoutTests/fast/multicol/out-of-flow/offset-properties.html
[add] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/LayoutTests/fast/multicol/vertical-lr/abspos-auto-position-on-line-expected.html
[add] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/LayoutTests/fast/multicol/vertical-lr/abspos-auto-position-on-line.html
[add] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/LayoutTests/fast/multicol/vertical-rl/abspos-auto-position-on-line-expected.html
[add] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/LayoutTests/fast/multicol/vertical-rl/abspos-auto-position-on-line.html
[modify] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/Source/core/layout/LayoutBox.cpp
[modify] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/Source/core/layout/LayoutFlowThread.cpp
[modify] https://crrev.com/57b66b0901dfcd97ed669a3635c55fbb6cc01fc9/third_party/WebKit/Source/core/layout/LayoutFlowThread.h

Project Member

Comment 17 by bugdroid1@chromium.org, Aug 17 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/820af6d2fdab6a77b3e247c67b443b1ea52ed0e7

commit 820af6d2fdab6a77b3e247c67b443b1ea52ed0e7
Author: mstensho <mstensho@opera.com>
Date: Wed Aug 17 16:09:05 2016

"Inline" auto-positioned out-of-flow objects are affected by pagination struts.

An out-of-flow positioned object that "belongs" to a line may need to adjust
its block position after the line has been laid out, since the line may have
been pushed to the next fragmentainer by a pagination strut.

BUG= 291616 

Review-Url: https://codereview.chromium.org/2249853007
Cr-Commit-Position: refs/heads/master@{#412546}

[add] https://crrev.com/820af6d2fdab6a77b3e247c67b443b1ea52ed0e7/third_party/WebKit/LayoutTests/fast/multicol/out-of-flow/abspos-auto-position-on-line-at-boundary-expected.html
[add] https://crrev.com/820af6d2fdab6a77b3e247c67b443b1ea52ed0e7/third_party/WebKit/LayoutTests/fast/multicol/out-of-flow/abspos-auto-position-on-line-at-boundary.html
[add] https://crrev.com/820af6d2fdab6a77b3e247c67b443b1ea52ed0e7/third_party/WebKit/LayoutTests/fast/multicol/out-of-flow/abspos-auto-position-small-on-line-at-boundary-expected.html
[add] https://crrev.com/820af6d2fdab6a77b3e247c67b443b1ea52ed0e7/third_party/WebKit/LayoutTests/fast/multicol/out-of-flow/abspos-auto-position-small-on-line-at-boundary.html
[modify] https://crrev.com/820af6d2fdab6a77b3e247c67b443b1ea52ed0e7/third_party/WebKit/Source/core/layout/LayoutBlockFlowLine.cpp
[modify] https://crrev.com/820af6d2fdab6a77b3e247c67b443b1ea52ed0e7/third_party/WebKit/Source/core/layout/line/BreakingContextInlineHeaders.h

Comment 18 by msten...@opera.com, Aug 17 2016

Status: Fixed (was: Available)

Sign in to add a comment