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

by

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:

Brim in iOS simulator.

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.

More Related Contents:

  1. Height equal to dynamic width (CSS fluid layout) [duplicate]
  2. Force link to open in mobile safari from a web app with javascript
  3. How to open a native iOS app from a web app
  4. Fixed positioning in Mobile Safari
  5. Copy to clipboard using Javascript in iOS
  6. Simplest way to detect a pinch
  7. Programmatically focus on next input field in mobile safari
  8. Responsive horizontal page sliding
  9. Is there any way to use window.onbeforeunload on Mobile Safari for iOS devices?
  10. programmatically changing webkit-transformation values in animation rules
  11. Bootstrap v2 Dropdown Navigation not working on Mobile Browsers
  12. How to detect in iOS webapp when switching back to Safari from background?
  13. screen styling when virtual keyboard is active
  14. Prevent iOS bounce without disabling scroll ability
  15. Mobile Safari on iOS crashes on big pages
  16. How to make superfish dropdown menu responsive?
  17. How to open Safari from a WebApp in iOS 7
  18. Detect if page is loaded inside WKWebView in JavaScript
  19. Is it possible, in JavaScript, to detect when the screen is turned off in the Android & iOS browsers
  20. Is there an alternative method to use onbeforeunload in mobile safari?
  21. Preserve browser window aspect ratio while shrinking [closed]
  22. How can i create html automatic change page? [duplicate]
  23. Can jQuery get all CSS styles associated with an element?
  24. react native use variable for image file
  25. Cannot access cssRules from local css file in Chrome 64
  26. “Scroll” to the very right of a long text input
  27. How to use javascript conditionally like CSS3 media queries, orientation?
  28. Can I use webpack to generate CSS and JS separately?
  29. How to check if css value is supported by the browser?
  30. CSS transitions do not work when assigned trough JavaScript

Leave a Comment