css: align-items center (flexbox) visual bug in firefox

Question

I'm facing a specific problem when using flexbox and align-items in an element and then absolute positioning in the child.

There's a visual bug in the child element. In firefox, the <h3> element —inside figure.right— appears at the top of the parent, whether in chromium, the same element appears in the middle of the parent. In firefox, it corrects itself if I deselect/select whatever style in the inspector or resize the window, so it seems when firefox refreshes the dom, the bug is fixed by itself.

I have the following flexbox element:

<figure class="right">
    <h3><?= $lang->getW('h3_a_security') ?></h3>
    <figcaption>
        <p><?= $lang->getW('p_a_security') ?></p>
    </figcaption>
</figure>

And the CSS:

* { position: relative; margin: 0; padding: 0 }

figure {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0 0 1vw
}
figure > h3,
figure > figcaption { width: 42.5% }
figure.left > h3 { text-align: right }
figure.right > h3 { position: absolute; right: 0; text-align: left }
figure > figcaption {
    padding: 1vw;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 5px rgba(230,230,230,0.6);
}
figure.left > figcaption { margin-left: auto }

This alone doesn't trigger the bug, but it's basically what I want to achieve. Anyways I've prepared a fiddle, with the full structure where the above code belongs, that demonstrates the bug in firefox: https://jsfiddle.net/cng5z8km/2/ (just resize the output window to see)

Please, confirm it's happening to you too, and if possible, how can I workaround this? Also, how should this be reported? I mean, what is the technical explanation of this bug? I'd like to report it to the bug-tracker but I have no idea how to present it (I suppose it's not appropriate to ask this question as is in the bug-tracker).

Answer 1

Update Sep. 2022

A note, as of today this might not be an issue anymore, as browsers over time tends to comply with the current spec. in the same way.

So this workaround might, or might not, be needed, other than in situations where one need to support older browsers that still behave differently.

Here is another later posted question, with similar issue and other possible workarounds:

• Absolutely positioned flex item is not removed from the normal flow in IE11

---

When you make a flex item position absolute, you will encounter different behavior cross browsers since they are not consistent (i.e. in Safari it won't work the same as in Chrome).

• https://developers.google.com/web/updates/2016/06/absolute-positioned-children

What is seen in your image animation I can't reproduce, thought one way to make an absolute positioned item center vertically cross browser is to use top: 50%; transform: translateY(-50%).

figure.right > h3 { 
  position: absolute;
  top: 50%;                                /*  added  */
  transform: translateY(-50%);             /*  added  */
  right: 0;
  text-align: left 
}

Updated fiddle