898452 - CSS3 multicolumn does not respect containing block height with abspos

Status: NEW

(Core :: Layout, defect)

Description

[Alex Oshchepkov]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.72 Safari/537.36

Steps to reproduce:

Platform: Windows 7 x64 Firefox 22
Here is a fiddle with columned content with wrapper div:
http://jsfiddle.net/AmqD5/2/
If content is columed you may want to resize window to get improper behaviour.


Actual results:

content should be columned (as it is in webkit or <=21 versions)


Expected results:

content is not columnized. Actually layout behaves strangely depending on window size.

Comment 1

[Alex Oshchepkov]

updated fiddle.
http://jsfiddle.net/AmqD5/4/

Comment 2

[Mats Palmgren (inactive)]

Regression window: 2012-07-31-03-05-41 -- 2012-08-01-03-05-20
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=9d2a7a8ca1c7&tochange=582d4c67b3a7
I'm guessing bug 764567.  (But that's in FF17 - did we backout/disable that
on 18/19/20/21 branches?)

Comment 3

[Mats Palmgren (inactive)]

Attachment: Reporter's testcase

Comment 4

[Scott Johnson (:jwir3)]

(In reply to Mats Palmgren (:mats) from comment #2)
> Regression window: 2012-07-31-03-05-41 -- 2012-08-01-03-05-20
> http://hg.mozilla.org/mozilla-central/
> pushloghtml?fromchange=9d2a7a8ca1c7&tochange=582d4c67b3a7
> I'm guessing bug 764567.  (But that's in FF17 - did we backout/disable that
> on 18/19/20/21 branches?)

Yes, I think that behavior was disabled because of bug 810726. This seems similar to bug 877716.

Comment 5

[Scott Johnson (:jwir3)]

From my initial debugging, it looks as though the behavior only happens on a reflow based on resizing the outer window. If we then reload the page, it reflows to the correct size.

If I modify the fiddle so that -moz-column-fill: auto is explicitly specified on the "columns" div, the problem goes away, which leads me to believe that we're not correctly catching a case where we should abandon trying to balance.

Comment 6

[Alex Oshchepkov]

Just modified case example that may help to shed some light on the issue:
This fiddle also show that the same problem persists with relative positioning:
http://jsfiddle.net/AmqD5/18/

It happens because of the last div:

<div uid="" style="line-height:1.4;margin-bottom:435px;">    </div>

and css: .columns div { margin-bottom: 10px}

If to remove this div it reflows correctly. And the second thing if we put empty <div></div> inside
<div uid="" style="line-height:1.4;margin-bottom:435px;"><div></div></div>
it will reflows correctly too.

Comment 7

[Scott Johnson (:jwir3)]

Attachment: reduced testcase

(In reply to Alex Oshchepkov from comment #6)
> Just modified case example that may help to shed some light on the issue:
> This fiddle also show that the same problem persists with relative
> positioning:
> http://jsfiddle.net/AmqD5/18/
> 
> It happens because of the last div:
> 
> <div uid="" style="line-height:1.4;margin-bottom:435px;">    </div>
> 
> and css: .columns div { margin-bottom: 10px}
> 
> If to remove this div it reflows correctly. And the second thing if we put
> empty <div></div> inside
> <div uid="" style="line-height:1.4;margin-bottom:435px;"><div></div></div>
> it will reflows correctly too.

Thanks, Alex. The testcase that reproduces reliably will really help us narrow down the issue. I've attached a reduced test case, distilled from what you gave in this fiddle.

Comment 8

[Scott Johnson (:jwir3)]

(In reply to Scott Johnson (:jwir3) from comment #7)
> Created attachment 783421 [details]
> reduced testcase
> 
> (In reply to Alex Oshchepkov from comment #6)
> > Just modified case example that may help to shed some light on the issue:
> > This fiddle also show that the same problem persists with relative
> > positioning:
> > http://jsfiddle.net/AmqD5/18/
> > 
> > It happens because of the last div:
> > 
> > <div uid="" style="line-height:1.4;margin-bottom:435px;">    </div>
> > 
> > and css: .columns div { margin-bottom: 10px}
> > 
> > If to remove this div it reflows correctly. And the second thing if we put
> > empty <div></div> inside
> > <div uid="" style="line-height:1.4;margin-bottom:435px;"><div></div></div>
> > it will reflows correctly too.
> 
> Thanks, Alex. The testcase that reproduces reliably will really help us
> narrow down the issue. I've attached a reduced test case, distilled from
> what you gave in this fiddle.

Hm, so both my reduced testcase and the fiddle posted in comment 6 show incorrect column rendering in Firefox 21, as well...

Comment 9

[Scott Johnson (:jwir3)]

(In reply to Scott Johnson (:jwir3) from comment #8)
> Hm, so both my reduced testcase and the fiddle posted in comment 6 show
> incorrect column rendering in Firefox 21, as well...

I think I might be chasing multiple rabbits here... some of the jsfiddle test cases work in earlier versions of firefox, but the reduced test case and test case posted in comment 6 don't work in firefox as far back as 01-01-2012.

Comment 10

[Scott Johnson (:jwir3)]

Comment on attachment 783421 [details]
reduced testcase

Sorry, I guess this testcase is invalid.

Comment 11

[Scott Johnson (:jwir3)]

Ok, added a better testcase distilled from the one given by Alex in comment 6. This works as expected in Webkit, but after the resize of the iframe in Firefox, the columns exceed the specified height:

http://people.mozilla.org/~sjohnson/bug898452/testcase.html

Comment 12

[Scott Johnson (:jwir3)]

It looks like, from the testcase I posted in comment 11, that this bug corresponds to the second regression range mentioned in bug 877716, comment 2. So, that would be:

Last good nightly: 2012-07-31
First bad nightly: 2012-08-01
http://img89.imageshack.us/img89/1570/scroll2s.png
Pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=9d2a7a8ca1c7&tochange=582d4c67b3a7

(As mats mentioned in comment 2 - I was just confirming this.)

The thing is, bug 877716 is complicated - there are three regression ranges, but this bug definitely isolates one of them. I think we should leave this bug open to track one of the regression ranges in bug 877716, and then see if bug 877716 can be closed after resolving this issue.

Comment 13

[Cosmin Muntean [:cmuntean], Ecosystem QA]

Firefox: 45.0.1, Build ID: 20160315153207
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0

Hi,

I have tested this issue on the latest Firefox (45.0.1) release, latest Nightly (48.0a1 - Build ID: 20160328030215) build and it is still reproducible. I have used the provided test case from comment 3 and the provided URL from comment 0. Re-sizing the window causes the column number to change from 3 to 1.

Thanks,
Cosmin.

Comment 14

[BugBot [:suhaib / :marco/ :calixte]]

The bug assignee didn't login in Bugzilla in the last 7 months, so the assignee is being reset.