Safari performance problem with absolute positioning

While working on a React project, I noticed abyssal performances on Safari only.

It took me some time to figure out, but the culprit was the use of absolute positioning.

Here is the layout I had:

The whole page is rendered by react, and I have about a thousand of those "A, B, C, D, ..." nodes.

When updating component in "Pane 1", I noticed a significant performance loss under Safari (OS X 10.11.6, Safari 9.1.2 (11601.7.7)). At first I checked that the bottom part was not re-rendered when updating components in "Pane 1" and after careful checks, I was sure that I (through React) was only touching the DOM in “Pane 1”.

With a thousand nodes in the bottom panel, each DOM update of "Pane 1" would take about 500ms.

So I replaced the bottom elements with empty divs, and them problem was gone. As soon as I added an element into the divs, everything was slow again. Until I tried without using absolute positioning inside "A, B, C, D, ...".

The conclusion is quite simple, every absolute positioned node will take layout time when touching the DOM anywhere in the page under Safari.

It is to be noted that the bottom part had a scrolling horizontal overflow, and that about 5 nodes are visible at a time (depending on window size).

I don’t know if this is a bug or expected behavior. Anyway, I replaced the positioning with flexbox and everything was fast again.

And before you ask, I did not plan on using absolute positioning, it was some design tests, and I did a quick implementation with absolute positioning, as flexbox requires a bit more thinking, I did not expect it to make the page unusable.