🐛 Bug?: Emojisplosion effect snaps down when mobile keyboard disappears

[joemcil]

Overview

...

using it here (https://julians-fantabulous-site-0260b5.webflow.io/old-home) on the 'join waitlist' button. on desktop it works great but on mobile it doesnt explode out of the button but just below.

using code straight from the library

<script async src="https://unpkg.com/emojisplosion/lib/global.js"></script>

<script>
window.addEventListener('DOMContentLoaded', () => {
    const button = document.querySelector('[data-trigger="emoji"]');

    const cumulativeOffset = (element) => {
        let top = 0,
            left = 0;
        do {
            top += element.offsetTop || 0;
            left += element.offsetLeft || 0;
            element = element.offsetParent;
        } while (element);

        return {
            top: top,
            left: left
        };
    };

    button.addEventListener("click", function() {
        
        emojisplosion({
        	emojis: ["🤫"],
            physics: {
                fontSize: 28,
                initialVelocities: {
                    rotation: {
                        max: 28,
                        min: -28
                    }
                },
                rotationDecelaration: 1.01
            },

 
                      
              position() {
                const offset = cumulativeOffset(button);

                return {
                    x: offset.left + button.clientWidth / 2,
                    y: offset.top + button.clientHeight / 2
                   
                   
                };
            }
        });
    });
});

</script>

[JoshuaKGoldberg]

Ok @joemcil I poked around at this - and I think it's not a bug in Emojisplosion, but just a consequence of how mobile keyboard interact with the main webpage.

Context: emojis right now are positioned with CSS:

• position: relative:
• transform: translate(443.433px, 463.129px) rotate(189deg);

You can see how these work together by:

1. Visiting https://julians-fantabulous-site-0260b5.webflow.io/old-home
2. In the console, running something like setTimeout(() => { debugger; }, 2000)
3. Clicking join the waitlist
4. In the elements panel, selecting an emoji

Issue: because emojis are positioned relative to the page, anything that makes the page move up or down suddenly -such as a mobile keyboard- will shift the emojis. You can simulate this by running something like document.body.style.marginTop = '-10rem'; in the console.

I think the only way around this would be to make the emojis parent container relative to the bottom of the page. position: fixed; bottom: 0; height 100%;. Right now that parent container is just an unstyled <div>.

Accepting PRs to add those styles to the emojis container! But note that I haven't tried this out personally - so you'll want to make sure this doesn't add any new, unexpected bugs. 🙂

[JoshuaKGoldberg]

@all-contributors please add @joemcil for bug.

🤖 Beep boop! This comment was added automatically by all-contributors-auto-action.
Not all contributions can be detected from Git & GitHub alone. Please comment any missing contribution types this bot missed.
...and of course, thank you for contributing! 💙

[allcontributors]

@JoshuaKGoldberg

I've put up a pull request to add @joemcil! 🎉

I couldn't determine any contributions to add, did you specify any contributions?
Please make sure to use valid contribution names.