CSSのdisplay:noneとvisibility:hiddenの違い

display:none

要素の表示を消す。要素が存在しないものとして、レンダリングされる。

visibility:hidden

要素を非表示にする。
高さや、幅などのレイアウトはそのままとなるため、 非表示にしている要素の部分が空白になる。

補足

jsの操作で影響があったような気がしたのですが、
すぐにどういうケースでどういった現象が発生するのか 現象を詳しく覚えていないので今後調べます。