Bug 192463 – Flash of content at wrong offset after a series of transitions

• Status: NEW
• Component: Layout and Rendering

[Joost Lubach]

Created attachment 356724 [details]
Mysterious incorrect frame is rendered (and corrected right after) after performing complex layout routine

I have encountered a strange situation where a mysterious frame is rendered in Webkit, after I've done some complex layout routine. As this doesn't happen in Chrome, it *might* be a Webkit bug, but perhaps someone here can see if I'm doing something wrong.

In big lines, this is the outline of the application:

1. There are two 'layers' (`base` & `overlay`)
2. There is a transition between them when I click on the page.
3. When I'm scrolled down a bit, in Safari, just before the transition, the base layer jumps up to the top, and back again:

https://i.stack.imgur.com/NH9sn.gif

However, if I'd draw a timeline of my code and where this bug occurs, it's like this:

```|-- L1 -- R -- L2 -- ❌ -- ✅ -- ...|```

Where:

* `L1`: Layout code
* `R`: Forced reflow
* `L2`: Layout code
* ❌: Incorrect frame
* ✅: Correct frame

In other words, the incorrect frame is rendered and corrected by the browser, without any of my code interfering. However, the incorrect frame is a *result* of some of the code I'm executing in `L1` (if I remove some of the layout code, the bug disappears).

In the attached zip, I've included source code with which this problem can be reproduced.

----

Just in case this is not a bug, but I'm doing something wrong, I've also posted the question on StackOverflow: https://stackoverflow.com/questions/53650499/safari-mysterious-frame-after-performing-complex-layout.

[Joost Lubach]

Re. the title change: the flash of content actually appears *before* any transitions occur. However, after I’ve performed some layout routines in preparation for the transitions.