Чем {display: none;} отличается от {visibility: hidden;}
Начнём с того, что {display: none;} полностью скрывает элемент со страницы и всё выглядит так, как если бы его вообще не было; в свою очередь {visibility: hidden;} просто делает элемент невидимым, но сохраняет занимаемое им место (как при относительном позиционировании). В то же время оба элемента с обозначенными свойствами доступны скриптам, так как в DOM-дереве, естественно, никаких изменений не происходит.