1574134 - html page hangs on reload after 68 update

Status: RESOLVED WORKSFORME

(Core :: Layout: Flexbox, defect, P3)

Description

[Albiach92]

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

Steps to reproduce:

I have a page that works as it should in chrome and edge, and used to work fine in firefox before. I made a copy of the html code generated here :

http://100monos.com/test/BreaksFirefox.html

and one without JS here:

http://100monos.com/test/BreaksFirefoxNoJs.html

If you open any of the two with chrome there is no problem, but firefox will load it the first time, then will hang on reload

Actual results:

It will show the spining wheel animation indefinitely and even start freezing firefox if you let it long enough.

Expected results:

The page should reload the content and not stay in loading screen forever.

Comment 1

[Albiach92]

Some times you need to reload(ctrl+r) the page more than once to see the behavior

Comment 2

[Pablo]

Hi

I checked the provided Link http://100monos.com/test/BreaksFirefox.html

So far i checked windows 10 64bit

Firefox Beta 69.0b15
Firefox Release 68.0.2
Firefox Nightly 70.01

i was able to reproduce the issue on all versions
sometimes it took like 10 reloads to halt. I also minimized and maximized the window and hit reload to replicate.

i will check MacOs and Ubuntu.

Comment 3

[Albiach92]

I fixed the problem removing this class from my css:

.hijos{
display: flex;
flex-direction: column;
justify-content: space-between;
}
Firefox must have a problem with flex on reload.

Comment 4

[Pablo]

I tested the issue using the link provided

On windows10 64bit + Ubunu 18.02 64bit + MacOs 10.14
Using all current firefox versions:
Firefox Nightly 70.0a1
Firefox Beta 69.0b15
Firefox Release 68.0.2

Sometimes you need to keep reloading 30 times and it will hang loading
Tested other Browser in windows10 reloading constantly and it never hanged.

Comment 5

[Daniel Holbert [:dholbert]]

Yeah, this looks bad. I was able to capture a profile:
https://perfht.ml/32xC1wT

If I'm reading it right, it looks like (when things go badly), the page has extremely deeply nested flexboxes (and scrollable elements), and we death spiral into some exponential blowup while laying them out.

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: testcase from website (zipped)

Here's the website, saved from chrome, zipped up.

I verified that I can trigger the bug when (re)loading a local copy of this testcase, in Firefox. (And it loads fine in Chrome.)

Comment 7

[Daniel Holbert [:dholbert]]

Still hoping to circle back to this at some point; sorry it's been a while. For now, categorizing it under the umbrella of meta-bug 1304473 for flexbox perf issues.

Comment 8

[Daniel Holbert [:dholbert]]

This seems like it's been fixed (perhaps via bug 1365806, via addressing the scenario described in its dupe-bug 1503660).

At least: I can't reproduce any significant lag or hangs, when loading either of the test URLs from comment 0 and reloading. I reloaded both pages over 10 times each, and hit no issues.

Pablo: since you were able to reproduce before -- would you mind retesting this, with latest Nightly (from https://nightly.mozilla.org/ ) and see if you can still reproduce?

(Also/alternately, reporter: if you wouldn't mind testing latest Nightly here to see if things have improved, that'd be great!)

Comment 9

[Pablo]

Attachment: LOAD.png

Comment 10

[Pablo]

Hi daniel, i tried with latest nightly 79.0a1 on windows10 64bit on this site http://100monos.com/test/BreaksFirefox.html
it is loading the page but after 5 or 6 refresh, after the site finishes the refresh... it shows nothing on the screen.

see screenshot attached.

This on chrome i have not seen happening, sometimes it gives page unresponsive message in chrome, and takes a lot of time to refresh, other times it loads right away..

Comment 11

[Daniel Holbert [:dholbert]]

Hi Pablo -- I'm not sure I understand your comment. I'm pretty sure the screenshot you attached is the correct rendering of that testcase -- at least, it's how it renders for me in Firefox as well as in Chrome. (Note that that page is just a reduced testcase that's intended to trigger a performance problem -- it's not supposed to look especially pretty.)

Are you sometimes seeing a different rendering? Can you attach a screenshot of that different rendering, or describe it?

(In any case, that potential issue would probably want its own bug; this bug here was about a hang, and there's no hang anymore, it seems.)

Comment 12

[Daniel Holbert [:dholbert]]

(I tried refreshing the page a bunch of times, and it always looks the same for me.)

Comment 13

[Pablo]

Attachment: bug2.png

Comment 14

[Pablo]

Hi daniel, sorry for the late reply.

The picture i uploaded on comment #9 is when the page kind of loads but no data is brought into the brown part.

I am attaching now a screenshot of the page when it loads and brings the data.(after it loads you can zoom in on the graph)

Sometimes it loads the data, i press refresh many times and loads the data, and sometimes you do a refresh and stays without data like on comment9

Comment 15

[Daniel Holbert [:dholbert]]

Thanks! I see that now. I think that's unrelated, and I'm not convinced it's a Firefox bug.

The page is using some complicated pan-and-zoom JS implementation (using gigantic CSS transforms, due to the gigantic amount of content). And when it loads as blank, it's just that the content is all transformed offscreen (possibly/probably at the instruction of the page's own JS).

I'm seeing unstable positioning (i.e. changing from load-to-load) behavior in Chrome as well, so I suspect this isn't a Firefox-specific issue -- it's just a bit of non-determinism in the testcase's own JS or something like that.

So anyway, it does seem like the original bug here (the browser hang) is fixed. It might be worth spinning off a followup bug with a reduced testcase for the unstable-rendering issue, if anyone feels like digging into that -- but again, I'm not convinced that part is a browser bug.