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