Ios 8 Removed "Minimal-Ui" Viewport Property, Are There Other "Soft Fullscreen" Solutions

iOS 8 removed minimal-ui viewport property, are there other soft fullscreen solutions?

The minimal-ui viewport property is no longer supported in iOS 8. However, the minimal-ui itself is not gone. User can enter the minimal-ui with a "touch-drag down" gesture.

There are several pre-conditions and obstacles to manage the view state, e.g. for minimal-ui to work, there has to be enough content to enable user to scroll; for minimal-ui to persist, window scroll must be offset on page load and after orientation change. However, there is no way of calculating the dimensions of the minimal-ui using the screen variable, and thus no way of telling when user is in the minimal-ui in advance.

These observations is a result of research as part of developing Brim – view manager for iOS 8. The end implementation works in the following way:

When page is loaded, Brim will create a treadmill element.
Treadmill element is used to give user space to scroll. Presence of
the treadmill element ensures that user can enter the minimal-ui view
and that it continues to persist if user reloads the page or changes
device orientation. It is invisible to the user the entire time. This
element has ID brim-treadmill.

Upon loading the page or after changing the orientation, Brim is using
Scream to detect if page is in the
minimal-ui view (page that has been previously in minimal-ui and has
been reloaded will remain in the minimal-ui if content height is
greater than the viewport height).

When page is in the minimal-ui, Brim will disable scrolling of the
document (it does this in a safe
way that does not affect
the contents of the main element). Disabling document scrolling
prevents accidentally leaving the minimal-ui when scrolling upwards.
As per the original iOS 7.1 spec, tapping the top bar brings back the
rest of the chrome.

The end result looks like this:

For the sake of documentation, and in case you prefer to write your own implementation, it is worth noting that you cannot use Scream to detect if device is in minimal-ui straight after the orientationchange event because window dimensions do not reflect the new orientation until the rotation animation has ended. You have to attach a listener to the orientationchangeend event.

Scream and orientationchangeend have been developed as part of this project.

safari fullscreen in iOS 7.1 with minimal-ui meta tag

This option is for iPhone only (right now).

It removes the additional bars on top and bottom of the viewport introduced with iOS 7.0 when the user scrolls up.

This is especially useful in landscape orientation, where a real fullscreen experience will be back, like it was right before iOS 7.

EDIT:

Source: official release notes for iOS 7.1

https://developer.apple.com/library/ios/releasenotes/General/RN-iOSSDK-7.1/

EDIT 2:
Minimal-UI is no longer supporter in iOS 8 (thanks "achairapart")

iOS 7.1 minimal ui causing problems with viewport height css unit (vh)

If the scrolling element is not body, minimal UI should not activate.

Wrap your content in a div with overflow: auto and set your body's overflow to visible. Both body and the div must have their heights and widths set to 100%.

So your css might look like:

body {
    width: 100%;
    height: 100%;
    overflow: visible;
}

#container {
    width: 100%;
    height: 100%;
    overflow: auto;
}

iOS 15 minimized address bar issue with fixed position, full screen content

I have recently faced the same problem, when setting the body position to fixed to block scrolling while an overlay is displayed. As soon as the scrolling is disabled, Safari stops rendering the lower area which would be covered by the expanded iOS UI, leaving behind the same black bar as you're showing in your screenshot.

Setting html.style.height to 100vh while the body is set to position: fixed seems to fix the issue.

I have build a simple example page where you can see the difference.
After you open the page, you have to scroll down a little towards the buttons to collapse the Safari UI. Then you can toggle position: fixed or the code-to-fix-error class (to fix the error) by clicking the buttons.

In my example of the scroll blocking:
Setting the height to calc(100vh - 1px) would also prevent the safari native rubber band / elastic scrolling effect while the the popup is active. This change should only be applied to iOS devices tho.

const btnError = document.querySelector('button.error')
btnError
  .addEventListener('click', () => {
    btnError.innerHTML = document.documentElement.classList.toggle('code-to-fix-error')
      ? 'Fix active'
      : 'Fix inactive'
  })

let y = 0
const btnToggle = document.querySelector('button.toggle')
btnToggle
  .addEventListener('click', () => {
    const _doc = document.documentElement
    if (_doc.classList.contains('active')) {
      _doc.style.setProperty('--scroll-y', `0`)
      _doc.classList.remove('active')
      window.scroll(0, y)
      btnToggle.innerHTML = 'position: static'
    } else {
      y = window.scrollY
      _doc.style.setProperty('--scroll-y', `-${y}px`)
      _doc.classList.add('active')
      btnToggle.innerHTML = 'position: fixed'
    }
  })

body {
  padding: 400px 0 0 0;
  margin: 0;
  inset: 0;
  -webkit-text-size-adjust: 100%;
  background-color: #435283;
  text-align: center;
  height: 8000px;
  width: 100%;
}

html.code-to-fix-error.active  {
  height: 100vh;
}

html.active body {
  top: var(--scroll-y);
  overflow: hidden;
  position: fixed;
}

button {
  appearance: none;
  line-height: 30px;
  padding: 0 10px;
  background-color: #FFF;
  color: #435283;
  border-radius: 3px;
}

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1, viewport-fit=cover">
    <meta name="theme-color" content="#000000">

    <style>/* styles here */</style>
  </head>
  <body>
    <button class="error">Fix inactive</button>
    <button class="toggle">position: static</button>
    
    <style>/* script here */</style>
  </body>
</html>