Security News
Socket Security Analysis Is Now One Click Away on npm
npm now links to Socket's security analysis on every package page. Here's what you'll find when you click through.
By Sarah Gooding - Feb 19, 2026
New: Introducing PHP and Composer Support.Read the Announcement →
brim
[](http://badge.fury.io/js/brim) [](http://badge.fury.io/bo/brim)
Brim
Brim enables minimal-ui for the iOS 8.
Minimal-UI
In iOS 7.1, a property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars in Safari as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.
The Issue
The minimal-ui viewport property is no longer supported in iOS 8.
The Solution
The minimal-ui itself is not gone. User can enter the minimal-ui with a "touch-drag down" gesture.
There are several pre-conditions, such as that there has to be enough content to enable user to scroll. Furthermore, there is no way of calculating the dimensions of the minimal-ui using the screen variables, and thus no way of telling when user is in the minimal-ui.
Brim tackles all of the issues associated with determining when user is in the minimal-ui, a method of instructing user to enter the minimal-ui, and a mechanism to lock user in the minimal-ui following the spec defined in the iOS 7.1.
The Underlying Implementation
There are three element required to make Brim work:
- Treadmill. Treadmill element is used to give user space to scroll. The element is dynamically created without you having to do anything. It is invisible to the user the entire time. This element has ID
brim-treadmill. - Mask element. It is displayed to the user when device is not in the minimal-ui state. The role of the element is to instruct user to enter the minimal-ui. You have to have this element as a direct descendant of
<body>. It has to have IDbrim-maskand no styling that would affect the position or the dimensions of the element. - Main element. This element is shown when mask is hidden. You have to have this element as a direct descendant of
<body>. It has to have IDbrim-mainand no styling that would affect the position or the dimensions of the element.
When page is loaded, Brim will create a treadmill. The role of treadmill is to make sure that the page content height is always greater than the viewport height. This ensures that user can enter the viewport and viewport continues to persist if you reload the page.
Upon loading the page or after changing the orientation, Brim is using Scream (developed as part of this project) 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).
For documentation purposes 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 (developed as part of this project) event.
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.
When page is in the full view, Brim will show the mask element.
Quick Start
<!DOCTYPE html>
<html>
<head>
<script src="./bower_components/scream/dist/scream.js"></script>
<script src="./bower_components/brim/dist/brim.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
var scream,
brim;
scream = gajus.Scream({
width: {
portrait: 320,
landscape: 640
}
});
brim = gajus.Brim({
viewport: scream
});
});
</script>
</head>
<body>
<div id="brim-mask">
<!-- Content displayed to the user when in full view. -->
</div>
<div id="brim-main">
<!-- Content displayed to the user when in minimal view. -->
</div>
</body>
</html>
Styling
If mask element does not have active content, it is advisable to disable pointer events:
#brim-mask {
pointer-events: none;
}
Do not set style that would change position or dimensions of the mask or the main element.
Do not style the treadmill.
Events
brim.on('viewchange', function (e) {
// Invoked when view changes.
// @var {String} 'full', 'minimal'
e.viewName;
});
Download
Using Bower:
bower install brim
Using NPM:
npm install brim
The old-fashioned way, download either of the following files:
FAQs
View (minimal-ui) manager for iOS 8.
The npm package brim receives a total of 33 weekly downloads. As such, brim popularity was classified as not popular.
We found that brim demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 12 Nov 2014
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Cline CLI npm Package Compromised via Suspected Cache Poisoning Attack
A compromised npm publish token was used to push a malicious postinstall script in cline@2.3.0, affecting the popular AI coding agent CLI with 90k weekly downloads.
By Sarah Gooding - Feb 18, 2026
Product
Socket Brings Supply Chain Security to skills.sh
Socket is now scanning AI agent skills across multiple languages and ecosystems, detecting malicious behavior before developers install, starting with skills.sh's 60,000+ skills.
By Wenxin Jiang, Alexandros Kapravelos - Feb 17, 2026