Skip to content

Instantly share code, notes, and snippets.

@foolip

foolip/flexbox-abspos.md

Created June 15, 2021 13:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save foolip/9f041eb1dc4720394704d97f1ca8b625 to your computer and use it in GitHub Desktop.
Save foolip/9f041eb1dc4720394704d97f1ca8b625 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flexbox-abspos.md

Analysis of abspos issues in flexbox

  • flex-abspos-staticpos-* (x42)

    • Also failing in Chrome, only working in Firefox
    • flexbox + position:absolute child with several align-content, align-self, justify-content combinations
    • fantasai's notes
      • Neither Firefox nor Chrome applies justify-self to an abspos flex child.
      • Both Firefox and Chrome apply align-self to an abspos flex child, in the cross axis.
      • Both Firefox and Chrome apply justify-content on the container to the abspos, in the main axis.
      • Firefox applies align-content on the container to the abspos, but Chrome doesn't. (Note that align-content only has an effect if the flexbox is multiline.)
    • https://bugs.chromium.org/p/chromium/issues/detail?id=1011718#c13
    • Still under discussion w3c/csswg-drafts#5843.

  • position-absolute-012.html (32 subtests failing)

    • flexbox + vertical-rl + (ltr|rtl) + justify-content-flex-(start|end) + align-items-flex-(start|end)
    • Problem computing the offsetLeft: flex container placed on the far right instead far left of the viewport
    • vertical-rl BAD but vertical-lr GOOD
    • Description: flex container with all the above. There is a position:absolute item inside with vertical-rl
    • Fails on chromium legacy

  • position-absolute-013.html (144 subtests failing)

    • flexbox + vertical-rl + (ltr|rtl) + justify-content-flex-(start|end) + align-items-flex-(start|end) + wrap|wrap-reverse
    • Problem computing the offsetLeft: flex container placed on the far right instead far left of the viewport
    • vertical-rl BAD but vertical-lr GOOD
    • Description: flex container with all the above. There is a position:absolute item inside with vertical-rl
    • Fails on chromium legacy

Proposed plan

  • I'd forget about the first bullet. It's contentious and there is no resolution. There are also so many differences already in the wild that I find unlikely that the implementations would ever switch to what the spec really say under the risk of maybe breaking many sites.

  • Regarding bullets 2 & 3 (position-absolute-0XX) I definitely think we should take a look. At least initially to evaluate the amount of required work. As it isn't really a flexbox issue (the layout is incorrect with non-flexbox containers as well) I think it'd be a clear win in terms of interoperability.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment