При использовании display:none элемент полностью удаляется из потока документа, то есть браузер не выделяет под него место. Это приводит к reflow — перерасчёту расположения и размеров других элементов на странице, так как изменяется структура документа. После reflow происходит repaint — перерисовка видимой части страницы.

При использовании visibility:hidden элемент остаётся в потоке документа и занимает место, но становится невидимым. В этом случае reflow не происходит, так как размеры и расположение элементов не меняются. Происходит только repaint, чтобы обновить отображение и скрыть элемент.

Итого:

display:none — reflow + repaint
visibility:hidden — только repaint

Это важно учитывать при оптимизации производительности и анимациях на странице.

Что произойдёт при display:none vs visibility:hidden с точки зрения reflow и repaint?