Сегодня я узнал о Fullscreen API.
До сегодняшнего дня я никогда не задумывался о последствиях полноэкранного режима или его влиянии на страницы и компоненты, которые я отображал. По общему признанию, несколько раз, когда я входил в полноэкранный режим во время разработки, это было случайно, после чего я быстро выходил.
В полноэкранном режиме все внимание уделяется отображаемому в данный момент элементу, то есть вызывающему элементу requestFullscreen() и его потомкам. Ничего больше. Этот последний бит является ключевым, по крайней мере, для меня.
Мое намерение состояло в том, чтобы отобразить модальное окно после нажатия кнопки боковой панели. Простой. И это было. Он работал, как и ожидалось, только не в полноэкранном режиме. Нажатие кнопки боковой панели в полноэкранном режиме ничего не отображало, никаких модальных окон. Выйти из полноэкранного режима — БУМ — модально! Что дает?!?
Немного покопавшись, я понял, что модальное окно, о котором идет речь, было реализацией реагировать-модальное, которое по умолчанию добавляется к телу документа. Тело документа является предком полноэкранного элемента, а не потомком. Z-индекс 99999 не мог это исправить (поверьте, я пытался!).
Решение: сделать модальное окно потомком полноэкранного элемента.
