Css only fullscreen element

Hi! I wanted to share with you my solution to a well known headache during sites development: fullscreen hero image with only CSS.

After spending a lot of time on it, and reading a lot, i came up with a pretty working solution (i wouldn't say a 100% working solution) but yet a solid one:

.fullscreen-wrapper {
  width: 100%;
  height: 100vh;
  /** mobile non iOS devices */
  @media (hover: none) and (pointer: coarse) {
    height: calc(100vh - 56px);
    @media (orientation: landscape) {
      min-height: 100vh;
      height: auto;
    }
  }
  /** iOS devices */
  @supports (-webkit-touch-callout: none) {
    height: -webkit-fill-available;
    @media (orientation: landscape) {
      min-height: auto;
      height: -webkit-fill-available;
    }
  }
}