K
K
KiBiLizard2019-04-11 18:55:16
JavaScript
KiBiLizard, 2019-04-11 18:55:16

Firefox doesn't render the whole DOM, what could it be?

The essence of the application briefly:

  • there is a very large file with text that needs to be displayed
  • for convenience, the file is divided into 999 chunks
  • chunks are loaded as needed
  • the browser has all 999 chunks to display the correct height of the regular scrollbar
  • unloaded - empty divs with styled height equal to the average height of already loaded chunks

The whole thing works fine in Chrome and Opera, there are some flaws in ie and edge, but in mozilla firefox 66.0.3 it works very strangely - only a little more than half of the DOM is displayed in the window.
5caf5e423714d010602936.png
you can see in the picture - the last line is there and selected (pressing end worked), the scrollbar is at the very bottom, however, the line outside the scrollbar
5caf5e95ae3f6598437534.png
here we also see that the scrollbar is at the very bottom, but judging by the DOM, there are still a bunch of blocks with a height of more than 20000px behind it.
5caf621e91258080930060.png
Here you can see that the parent blocks do not have any styles, there is nothing that could cause the display to be cut. However, the height of the container is very strange, in the pop-up window of the block from the inspector it is correct, but in the computed style it is almost half as much, and it does not change from the code at all, the container is used only to insert div chunks into it.
That is, all JS works correctly, the application works fine in the displayed part, even the end button that highlights the last line of the last chunk . //github.com/kibilizard/TryLasyLoadInJS
I have no idea why this could even happen? Can anyone come across, or can at least give a direction where to dig?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
K
KiBiLizard, 2019-04-13
@KiBiLizard

For reference, I'll still write.
Browser height limits found something like this:
Crome and Opera - 33,554,400 px
Firefox - about 17,660,130 px - this is the height after which the display starts to lag, before that
Edge and IE work fine - about 5,000,037 px - objects below this point simply does not display, although they are actually in the DOM.
Maybe it depends on the versions somehow, I checked in

  • Chrome 73.0.3683.103,
  • Opera 58.0.3135.127,
  • FF 66.0.3,
  • Edge 44.17763.1.0,
  • IE 11.437.17763.0

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question