diff --git a/app/assets/javascripts/darkswarm/directives/off_canvas_wrap.js.coffee b/app/assets/javascripts/darkswarm/directives/off_canvas_wrap.js.coffee
new file mode 100644
index 0000000000..68c4b331d8
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/directives/off_canvas_wrap.js.coffee
@@ -0,0 +1,22 @@
+# Extend the "offCanvasWrap" directive in "angular-foundation" to disable hiding of the off-canvas
+# upon window resize.
+#
+# In some browsers for mobile devices, the address bar is automatically hidden when scrolling down
+# the page. This is not workable if the height of the contents of the off-canvas exceeds the height
+# of the screen, because the latter portion of the contents stays hidden to the user.
+#
+# https://github.com/openfoodfoundation/angular-foundation/blob/0.9.0-20180826174721/src/offcanvas/offcanvas.js
+angular.module('mm.foundation.offcanvas').directive 'offCanvasWrap', ($window) ->
+  {
+    restrict: 'C'
+    priority: 1
+    link: ($scope, element, attrs) ->
+      win = angular.element($window)
+
+      # Get the scope used by the "offCanvasWrap" directive:
+      # https://github.com/openfoodfoundation/angular-foundation/blob/0.9.0-20180826174721/src/offcanvas/offcanvas.js#L2
+      isolatedScope = element.isolateScope()
+
+      # Unbind hiding of the off-canvas upon window resize.
+      win.unbind('resize.body', isolatedScope.hide)
+  }