Particles js in footer adds 3px space below footer

Question

I'm having a slight problem with a footer containing particles.js. Whenever particle.js is added to the footer a 3px white space appears below the footer. This doesn't happen when particles.js is not in the footer, so it has to be directly related to particles.js (or the css applied to it).

I've created a mock up in jsfiddle, one shows the problem with particles.js and another shows the problem gone when particles.js is removed.

With particles.js: http://jsfiddle.net/hsy8jbwc/2/

Without particles.js: http://jsfiddle.net/hsy8jbwc/3/

    #footer {position: relative; bottom: 0; width: 100%; height: 60px; line- 
    height: 60px; background-color: transparent}
    #footer .row {display:flex; align-items:center; justify-content: space- 
    around;}
    #footer-particles {position: absolute; height: 100%; width: 100%; background- 
    color: salmon; z-index: -1;}

    <footer id="footer">
       <div id="footer-particles"></div>
       <div class="container">
          <div class="row">
             <span class="text-muted">FOOTER</span>
          </div>
        </div>
    </footer>

I don't know, but on Firefox the space is much larger. Maybe that's a clue. — Mr Lister, Jun 21 '18 at 19:09
@MrLister canvas adds whitespace exactly like image do, due to alignment — Temani Afif, Jun 21 '18 at 19:13
@TemaniAfif I was trying to say, in Firefox the space below the footer is larger than in Chrome, all else being the same. — Mr Lister, Jun 21 '18 at 19:17
*facepalm* Thank you for pointing out it's due to the cancas. Would've never thought of that. — WeatherLight, Jun 21 '18 at 20:27

Particles js in footer adds 3px space below footer

0 Answers0

Linked