Bug 160551 - REGRESSION (201040): Flex box container: some items do not render if added dynamically
Summary: REGRESSION (201040): Flex box container: some items do not render if added d...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac OS X 10.11
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2016-08-04 07:58 PDT by jeanfelixg
Modified: 2016-08-05 16:28 PDT (History)
3 users (show)

See Also:

Sample to reproduce the issue. (112.31 KB, application/zip)
2016-08-04 07:58 PDT, jeanfelixg
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description jeanfelixg 2016-08-04 07:58:41 PDT
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.

Comment 1 Radar WebKit Bug Importer 2016-08-04 10:49:29 PDT
Comment 2 Simon Fraser (smfr) 2016-08-04 11:15:14 PDT
Regressed at http://trac.webkit.org/changeset/201040
Comment 3 Dave Hyatt 2016-08-05 11:42:03 PDT
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).
Comment 4 jeanfelixg 2016-08-05 16:28:57 PDT
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!