My emoji picker's full of helium


  • sockdevs

    0_1480438001217_upload-f94d27d9-4955-45c5-ba97-ca9dc7ae0aca

    To repro:
    • Scroll to very bottom of page
    • Open composer
    • Type part of an emoji
    • Scroll down more


  • @RaceProUK Not just emojis.



  • Does anything attach to the composer?


  • mod

    @xaade CSS is hard. I mean who really knows the difference between position: absolute; and position: fixed;? Of course, that probably wouldn't be a big deal if the completion dropdowns were children of the composer panel, but they aren't. They're direct children of the body element:

    0_1480459467031_upload-ba1cff90-3b42-4dec-bc63-a2e47f7e1750

    And what makes it really crazy is that those auto-complete menus are not sitting there for different purposes. They are left over stubs from previously abandoned auto-complete menus, but the software is obviously keeping track of them since the ID increments each time a new one is added. You can see them get injected into the DOM when you trigger a new one.



  • @abarker said in My emoji picker's full of helium:

    I mean who really knows the difference between position: absolute; and position: fixed;?

    To be fair... that's pretty ambiguous terminology.


  • mod

    @xaade Yeah, but if you're going to muck about with it, you better know what each one means.


  • sockdevs

    @abarker said in My emoji picker's full of helium:

    I mean who really knows the difference between position: absolute; and position: fixed;?

    While both use explicit co-ordinates, absolute is relative to the nearest ancestor element that's position: relative (or the body if there isn't one) and moves when you scroll, and fixed is relative to the window, so it doesn't move when you scroll.


  • mod

    @RaceProUK I thought absolute was relative to the nearest non-static ancestor (or body if no non-static ancestors exist).


  • sockdevs

    @abarker Every time I've used absolute, it's always been as a descendent of relative


  • Winner of the 2016 Presidential Election

    @RaceProUK relative isn't static, therefore the two things you're talking about are actually the same - but @abarker has it technically correct and you have it correct because you made sure to make it that way.


  • mod

    @RaceProUK said in My emoji picker's full of helium:

    @abarker Every time I've used absolute, it's always been as a descendent of relative

    Now I wish to experiment for confirmation when I get to my office later this morning. To jsfiddle!


  • Impossible Mission - B



  • position: relative

    The element will remain in the natural flow of the page.

    It also makes the element positioned: it will act as an anchor point for the absolutely positioned yellow block.

    position: absolute

    The element will not remain in the natural flow of the page. It will position itself according to the closest positioned ancestor.

    Because it's positioned, it will act as an anchor point for the absolutely positioned yellow block.

    Any element that is not the default value of "static" is positioned.

    For some value of "yellow": #ff3860


  • mod

    @Zecc I already knew what the documentation says. Now I want to know what the actual implemented behavior is!!!



  • @abarker Follow the link. They have live examples.


  • mod


  • sockdevs

    @abarker I checked those out, and the behaviour in Chrome matches the spec.

    I'm actually slightly disappointed: I wanted at least one :wtf:, even if it was only a tiny one.


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.