(WIN+Linux) absolutely positioned element in a flexbox

The place to report Pale Moon specific bugs on the Windows operating system.
Locked
muselato

(WIN+Linux) absolutely positioned element in a flexbox

Post by muselato » 2017-05-05, 08:45

I don't exactly know who follows specifications and who doesn't but this is at least a difference between Pale Moon on the one side and (all?) other browsers on the other side:

Let us have a DIV that has display: flex; flex-direction: column; justify-content: space-between and two elements, say images, inside itself. According to the CSS rules, either image will be situated at the edge of the DIV, one at the upper edge, the other at the lower edge. But if the upper image gets position: absolute (let us lay aside now why anyone should do it this way) a difference appears between Pale Moon and other browsers – in other browsers (EdgeHTML, Gecko, Blink and WebKit browsers tested), the second image is situated at the upper edge of the DIV now and so it disappears from the page's visitor's view because it is hidden behind the absolutely positioned image located in the same place; in Pale Moon however, the second image still remains at the lower edge of the DIV.

So, the absolutely positioned element is not a part of the flexbox according to the other browsers but it is a part of it according to Pale Moon.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 29251
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: (WIN+Linux) absolutely positioned element in a flexbox

Post by Moonchild » 2017-05-05, 11:31

Last time I looked at the spec, absolutely-positioned children had to be considered in-flow.
It's possible the spec changed out from under us (again); it looks like Firefox only very recently changed this behavior (starting with v52?) so it's likely not going to work in many browsers in use (I think IE behaves the same way we do, as well). Since the spec is likely changing, this creates ambiguity in how this is supposed to be handled.
Good news is however that you can work around this ambiguity among different browser implementations by changing the way you lay out your elements. just keep in mind that an absolutely positioned child is considered as a 0x0 in-flow item -- re-ordering the items in your layout will likely fix your issue (e.g. making the abspos item first-in-flow, or taking it out of the flow yourself, or similar).
(let us lay aside now why anyone should do it this way)
If there was a reason before, there sure isn't a reason anymore now, since it's not consistent across the spec versions.
"Son, in life you do not fight battles because you expect to win, you fight them merely because they need to be fought." -- Snagglepuss
Image

Locked