1535053 - {inc} Text/image alignment oscillates between different behavior each refresh

Status: NEW

(Core :: Layout: Block and Inline, defect, P3)

Description

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Attachment: Variant A (Letters Raised).png

There appear to be some cases where I observe different styling behavior on each refresh. I am filing in Core :: CSS Parsing and Computation as it feels like some styling data is being cached or there's a race somewhere.

Firefox 67.0a1 (2019-03-10)
macOS 10.14.3

STR:

1. Load https://styling-toggle-firefox.glitch.me/ with DevTools closed
2. The displayed output might look like either attachment A or B
   • For me, a regular refresh (Cmd-R) usually triggers variant A, but a hard refresh (Cmd-Shift-R) triggers variant B, but it is not consistent
3. Opening the DevTools inspector may also affect styling
4. If you are seeing variant A (letters raised), you should be able to inspect an element with class mx_BaseAvatar_initial and toggle any property off and back to on, which seems to force a style update and changes to variant B (letters centered)
   • If you try this experiment many times, you should close DevTools before refreshing. Simply having DevTools open affects cache timing and may cause the issue to not appear.

ER:

The styling output should look the same in all cases.

AR:

There seems to be a race somewhere that affects styling on initial page load.

Comment 1

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Attachment: Variant B (Letters Centered).png

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Nah, this seems like a reflow bug... More than probably a similar issues to the ones hanging off bug 255139 or related.

Comment 3

[Daniel Holbert [:dholbert]]

With devtools open:

• I can trigger "Variant A" on-demand by adding+removing display:none on one of the outer divs (e.g. <div class="mx_MemberEventListSummary">)
• I can trigger "Variant B" on-demand by adding+removing display:none on the <img> element.

So this seems like an inconsistency with full reflow (e.g. after forcing frames to be reconstructed for most of the page) vs. incremental reflow (e.g. after forcing frames to be reconstructed for the <img>).

And in jryans's STR, it's likely the image-load [and its resulting incremental reflow] that is triggering the race condition that gives us one or the other behavior.