4

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

enter image description here

Chazy Chaz
  • 1,781
  • 3
  • 29
  • 48
  • I don't see any difference in the layout between Chrome and FF. The version of FF you're using may be making a difference. – Michael Benjamin Sep 18 '17 at 01:17
  • Consider that children of a flex container, when absolutely positioned, are *not* flex items. They don't participate in flex layout. Also note that different browsers may vary in their rendering of these absolutely-positioned children. https://stackoverflow.com/q/32991051/3597276 – Michael Benjamin Sep 18 '17 at 01:21
  • You sure? I can see the problem in my phone using firefox. In chromium the `

    ` inside `figure.right` is vertically centered, wether in firefox is at the top. In firefox, when I resize the window, the `

    ` it falls to the middle automatically.

     – Chazy Chaz Sep 18 '17 at 01:21
  • I don't see any difference on PC desktop Chrome and FF. However, you may want to consider describing the bug. Your question doesn't really provide a description of the problem, aside from calling it a "visual bug". – Michael Benjamin Sep 18 '17 at 01:23
  • You're right, sorry, I'll edit right away. But I just did explain it, in firefox, the `

    ` appears at the top of the parent, whether in chromium it is at the middle.

     – Chazy Chaz Sep 18 '17 at 01:25
  • `h3`s positioned identically for me in Chrome and FF. See the link I posted in my previous comment (read the comments in my answer, as well). – Michael Benjamin Sep 18 '17 at 01:34
  • I just made a gif, so it seems is a problem with my firefox? And with my android firefox too? – Chazy Chaz Sep 18 '17 at 01:38
  • The GIF illustrates the problem well. It's not happening here in FF. Again, FF and Chrome behave the same at all times. Maybe updated to the most current FF?? – Michael Benjamin Sep 18 '17 at 01:40
  • 1
    I just tried cleaning the cache and site preferences but nothing, even on private mode. I'll save the passwords and try switching to normal firefox, I'm currently using firefox-kde (the one that came installed). But I'll do it tomorrow, it's almost 4am. – Chazy Chaz Sep 18 '17 at 01:50
  • It works perfectly, thanks. – Chazy Chaz Sep 19 '17 at 12:51

2 Answers2

3

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:

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

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

Asons
  • 84,923
  • 12
  • 110
  • 165
  • the transform solution does not work in all scenarios and is not a true replacement of the functionality that firefox does not have – John Miller Sep 09 '22 at 15:59
  • @JohnMiller -- 1. I updated my answer to be more clear, and linked to a later post. -- 2. No where did I say, or implied, it were a true replacement, workarounds almost never are. – Asons Sep 10 '22 at 10:00
0

When you have an absolutely positioned element, its parent element needs to have position:relative; in order to function as an anchor for the absolutely positioned element. So in your code above, figure.left would need position:relative; for figure.right > h3 { position: absolute; right: 0; text-align: left } to properly work.

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Sorry, I didn't mention it, I already set `position:relative;` by default at the beginning of the css file. You can see it in the fiddle. – Chazy Chaz Sep 18 '17 at 00:52
  • Also, I changed some style and since then the bug can't be seen. Just adding text so it has height and you can see it: https://jsfiddle.net/cng5z8km/2/ – Chazy Chaz Sep 18 '17 at 00:57