Bug 160551 – REGRESSION (201040): Flex box container: some items do not render if added dynamically

• Status: NEW
• Component: Layout and Rendering

Created attachment 285325 [details]
Sample to reproduce the issue.

Webkit nightly and Safari tech preview both have the issue.

When adding HTML dynamically into a flex box containers, some of the elements are not painted. 
A page resize is needed to reveal all its content.  Mouse hover reveals the underlaying elements.

I extracted a sample from an app im working on...  I used a setTimeout to simulate an XHR request for dynamic HTML content.

So, in the sample, there are flex containers inside other flex container (which have other elements that i removed for brevity) and it adds the dynamic content in "#jsSectionContentsimpleList57a33a09696da". The dynamic content is also a flex box container with both a section (blue) and a footer (green).

Open flex_draw.html from the zip to have a look.


P.S. Chrome, FF, IE11, Edge render it without issue.

Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/27702685>

[Simon Fraser (smfr)]

Regressed at http://trac.webkit.org/changeset/201040

[Dave Hyatt]

Difficult to fix. 201040 just optimized away a bogus repaint, so it's exposing the fact that flex box doesn't work with repainting properly (and never has). The repaint during layout model is problematic for flex box.

We either have to add in layout delta support, knowing there will be churn and incorrect repaints, or we need to move to a model where we don't repaint during layout (that's what Blink does I believe).

From my use case with flex box, Safari 9.1 have minor issues I could workaround with z-index tricks... But I can't find a way around with WebKit nightly or tech preview. Is there one I'm missing? 
I would prefer the old behaviour if this is too complicated to fix until the next official release. Of course, the real fix would be very much appreciated!