Fullscreen element on desktop Safari

[ghost]

I tried to render an element fullscreen on desktop Safari but was failing to make the element really full screen; I was left with black boxes on both sides of the element. Also, when exiting fullscreen, the whole window rendering got messed and didn't resize correctly (even after page refresh!). Chrome and Firefox worked out-of-the-box.

However, found this bit of css which fixed the problem for me, just in case someone else is struggling with the same issue!

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