Nikolay Talanov

Итак, постараюсь ответить, пускай и топорно.
Конкретно причину возникновения багов с position: fixed при скролле я не знаю, хотя с ним и сталкивался частенько (но думается мне, что хром при скролле заново отрисовывает фиксированный элемент).
А фиксится он с помощью backface-visibility: hidden потому, что когда вы применяете к элементам свойства opacity/transform (и то что относится к трансформам, собственно backface-visibility), то браузер создает для этих элементов отдельный слой ?лэйаута? (не уверен в том, конкретно слой чего создается). И благодаря этому браузер не перерисовывает элемент заново при каждом скролл-ивенте (что убирает эффект моргания в хроме).

Какие то ужасные советы выше перечислены, не советую вообще использовать стандартные методы jQuery для анимации.
В вашем случае анимация при убирании класса не срабатывает, ибо собственно она привязана к этому классу. Вам необходимо задать свойство transition для самого элемента .panel

.panel {
  transition: transform 0.7s;
}

1) Viewport единицы. В данном случае 100vh. Поддержка вот такая caniuse.com/#search=viewport
2) Если ваш див не находится где то глубоко в разметке, а лежит прямо в body (или глобальном контейнере), то можно сделать вот так:

html, body {
  height: 100%;
}
.container { // если имеется
  height: 100%;
}
.block {
  height: 100%;
}

Так как мы не задаем overflow: hidden для body или контейнера, то с ними ничего плохого не произойдет, контент по прежнему будет адекватно отображаться и скроллится.

Лучше на достаточно хорошем уровне изучить html+css+js (ваниллу+jQuery) и только потом смотреть в сторону фреймворков. Фрейморвки конечно вещь крутая, но их слишком много (или они слишком громоздкие). Отличные познания в js, и фронтенде в целом, не денутся никуда, а вот знания полученные от изучения особенностей и внутренностей какого-нибудь монструозного ангуляра могут с легкостью превратиться в тыкву с выходом, допустим, второй его версии (не все конечно, но большая часть). Все таки фреймворки это вещи уже под конкретные задачи, и они чаще всего рассчитаны на команды.

Вот простой и доступный гайд davidwalsh.name/css-flip (и живой пример davidwalsh.name/demo/css-flip.php)
Если вы не можете в английский, то схема такова:
1) Создаете элемент, в которой кладете 2 элемента, один будет лицом, другой "задом". Лицо просто встает как есть, а задняя сторона ставится с помощью с помощью position: absolute; top: 0; left: 0;
Обоим элементам задается 100% длины и высоты, backface-visibility: hidden и transition: transform %time%s;
2) Задней стороне даем transform: rotateY(180deg);
3) Назначаем на :hover родителя переворот обоих элементов по оси Y на -180 градусов. То есть передняя сторона станет transform: rotateY(-180deg); а задняя 0deg
4) И в конце добавляем родительскому элементу perspective: %число% (например 1000) для создания эффекта объема.
codepen.io/suez/pen/696e4a5351f1bf1428cc9e0e17285b... - примитивная демка на кодпене.