webkitRequestFullscreen в Safari не применяет полную стилизацию полноэкранного псевдоэлемента к целевому элементу div

Question

Я пытаюсь установить div в полноэкранном режиме, используя javascript, и он отлично работает во всех браузерах, кроме сафари. Я использую этот фрагмент javascript:

 if (document.querySelector("#" + id).requestFullscreen) {
              document.querySelector("#" + id).requestFullscreen();
            } else if (document.querySelector("#" + id).mozRequestFullScreen) { /* Firefox */
              document.querySelector("#" + id).mozRequestFullScreen();
            } else if (document.querySelector("#" + id).webkitRequestFullscreen) { /* Chrome, Safari and Opera */
              document.querySelector("#" + id).webkitRequestFullscreen();
            } else if (document.querySelector("#" + id).msRequestFullscreen) { /* IE/Edge */
              document.querySelector("#" + id).msRequestFullscreen();
            }

После некоторой отладки я обнаружил, что только в сафари полноэкранный псевдоэлемент не применяется со своим полным стилем на целевом элементе. В chrome я нашел этот стиль с инспектором на моем целевом div, который я не могу найти в сафари:

:not(:root):fullscreen {
    object-fit: contain;
    position: fixed !important;
    top: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    left: 0px !important;
    box-sizing: border-box !important;
    min-width: 0px !important;
    max-width: none !important;
    min-height: 0px !important;
    max-height: none !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    margin: 0px !important;
}

В то время как в сафари я нашел только это:

:-webkit-full-screen {
  background-color: white;
  z-index: 214783647;
}

Даже если я не вижу своего класса div или id здесь, он делает div фиксированным и полноэкранным с шириной 100% и высотой 100%. Сафари не делает. В сафари мой целевой div имеет ширину 0 и высоту 0 и как-то центрирован, поэтому я просто вижу пустой полноэкранный режим.

Я пытался исправить проблему с помощью css, но безуспешно:

.wrapper {
  &:fullscreen, &:-ms-fullscreen, &:-moz-full-screen, &:-webkit-full-screen {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
}

Как мне сделать так, чтобы мой целевой div был зафиксирован на полную ширину и высоту в сафари в полноэкранном режиме?