1323194 - Unnecessary expensive layout cost when using flex

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[pluritis]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36

Steps to reproduce:

Observer the following simple fiddle:
  https://jsfiddle.net/psteijn/939zp6jq/

Here you will find two div's acting as columns using flex.
The left column contains many divs, to make a full page layout expensive.
Now the right column, contains an input, when typing text, a number will be incremented in the right column, triggering a DOM request.




Actual results:

What happens is that, the DOM change in the right column (triggered by the keypress), causes a full page layout, which in this case is very expensive. But absolutely not required, since the left column would not change in dimension, even the right column dimension is not affected. For these kind of page updates, the use of flex would not be an option.


Expected results:

Expected the layouting not to affect the entire page, keeping the cost of the layout low, in essence do what IE and Chrome do.

Comment 1

[pluritis]

Additionally, in comparison even IE10 is blazingly fast.

Comment 2

[Timothy Nikkel (:tnikkel)]

I don't see any lag no matter how fast I mash the keyboard. I tried nightly and beta on osx. Can you try safe mode or a fresh profile?

Comment 3

[stefano.davella]

I can reproduce on Linux Mint 17 Mate-64 bit, Firefox 50.0.2

It takes around 300-500ms to type one character, typing 4-5 characters lags for at least one second and a half. 
The more nodes get created on the left panel, the slower it gets.
No issues on chrome.

Comment 4

[Timothy Nikkel (:tnikkel)]

If I increase the number of nodes the script creates then I can reproduce.

Comment 5

[pluritis]

Glad you were able to reproduce. And indeed it very much depends on the machine and OS, the quantity of nodes was chosen in order to prove that a full page layout is performed (rather than only the right column). This you can also easily compare to other browsers. I can think of many use cases, in which the user experience would suffer a great deal from this bug.

Comment 6

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

Clear a needinfo that is pending on an inactive user.

Inactive users most likely will not respond; if the missing information is essential and cannot be collected another way, the bug maybe should be closed as INCOMPLETE.

For more information, please visit BugBot documentation.

Comment 7

[Daniel Holbert [:dholbert]]

(In reply to Timothy Nikkel (:tnikkel) from comment #4)

If I increase the number of nodes the script creates then I can reproduce.

Here's a version with 10x the number of nodes as in comment 0: https://jsfiddle.net/hobx8g5u/

With that, I can reproduce substantial hangs in old builds, when typing into the textfield (characters don't appear for a second or more).
In current Nighlty, I don't see any delay when typing there, though.

Fix range: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=750e71a8f79b3b745a6653e555e60acb122f1241&tochange=5d14d1e9f74d7cac00bdefbda29244d586645682

--> Fixed by bug 1490890.