search

yiliansource / party-js

A JavaScript library to brighten up your user's site experience with visual effects!
https://party.js.org
MIT License
994 stars 45 forks source link

`party-js-container` div is too small, confetti effects are cut off. #70

Closed spencersolberg closed 3 years ago

spencersolberg commented 3 years ago

I'm using the confetti effect on my website for some buttons and when a key is pressed, but I've noticed that the confetti only goes so far into my page before being cut off. It looks like the party-js-container div might be at fault here, as it only covers part of my page.

Screen Shot 2021-08-30 at 3 40 36 PM

Here's an example of what it looks like:

https://user-images.githubusercontent.com/46253322/131396591-8d607660-f2ea-48c8-9c6c-1af69ef33645.mp4

As you can see, the confetti gets cut off halfway through.

This issue does not seem to happen in version 2.0.0. In my experience, the party-js-container takes up the entire page in that version.

Thanks!

yiliansource commented 3 years ago

Interesting, thanks for reporting! Which version is this on exactly? Can you reproduce this in a CodeSandbox?

spencersolberg commented 3 years ago

Hey, I'm using the latest version with JSDeliver (https://cdn.jsdelivr.net/npm/party-js@latest/bundle/party.min.js). I made a CodeSandbox with what I think is the same issue. It's a little different than my site in that the split is between the top and bottom rather than the left and right:

https://pux8m.csb.app

yiliansource commented 3 years ago

I see, it seems that this is because it fits the particle container to the size of the DOM. You could fix this by stretching the <body> to be atleast the size of the viewport. Do you think this is more intuitive to be the standard behaviour? In that case I'll patch it.

Edit: On second thought, the <body> element should always be atleast the width of your page, so it doesn't make sense being cut off on the right. Can you check the width of it on your original site? Did you do any fancy resizing magic?

spencersolberg commented 3 years ago

It looks like my <body> has max-width: 45rem set (I think this is from the css framework I'm using), and disabling that does let the confetti work everywhere. I've made another CodeSandbox here that should highlight my issue a little bit better:

https://v9x55.csb.app/

Edit: and here is that same site, but with v2.0.0:

https://64l54.csb.app/

(just the buttons work in this version)

yiliansource commented 3 years ago

I hope this is fixed now; I'll roll out a new version later today or tomorrow with the fix!

yiliansource commented 3 years ago

I just published v2.1.0, this should make it work! 😄