1576010 - A very tall block inside a scroll has its computed height overflow to negative

Status: NEW

(Core :: Layout, defect, P3)

Description

[remy.oukaour]

User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0

Steps to reproduce:

User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0
Build ID: 20190813150448

Steps to reproduce: Open the attached testcase.

This was originally discovered in a production website (not publically accessible) using a PrimeNG Table with close to a million (lazy-loaded, virtual-scroll) rows. The bug prevents us from accessing data beyond the top N immediately-loaded rows.

Actual results:

The 20,000,000px-tall rainbow-gradient div inside the 600px-tall overflow:auto div is only tall enough to contain its "lorem ipsum" text. The position:absolute green "(end)" div is not visible.

The scrollbar is still tall enough to cover 20 million px, but in the original PrimeNG Table the scrollbar itself is only tall enough for the text content.

Expected results:

The rainbow-gradient should be the full 20,000,000px tall. The "(end)" div should be at the bottom of the scroll when you scroll all the way down.

Comment 1

[Florencia Di Ciocco, NI to vbalducci]

Hi Remy,

I don't see the attached test case. Could you check it, please?

Thanks, Flor.

Comment 2

[remy.oukaour]

Attachment: example.html

Oops, thank you for noticing that!

Comment 3

[Florencia Di Ciocco, NI to vbalducci]

Hi Remy,

Thanks for the test case. I was able to reproduce the bug on the following versions:

release 68.0.2 (64-bit), nightly 70.0a1 (2019-08-30) (64-bit) and Beta 69.0b16 (64-bit).

I've chosen a component. If you consider that there's another component that's more proper for this case you may change it.

Best regards, Flor.

Comment 4

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

This is the case where a large height overflows the internal integer max, and produce a wrong layout result.