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.
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.