FSR-483: Fix black bar appearing below map on IOS15/Safari. (#271)

Co-authored-by: John Shields <[email protected]>
DEFRA · Nov 19, 2021 · 074a882 · 074a882
1 parent 53d57e6
commit 074a882
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/server/src/js/components/map/container.js b/server/src/js/components/map/container.js
@@ -38,6 +38,7 @@ window.flood.maps.MapContainer = function MapContainer (mapId, options) {
   // Disable body scrolling and hide non-map elements
   document.title = options.title
   document.body.classList.add('defra-map-body')
+  document.documentElement.classList.add('defra-map-html')
 
   // Create the map container element
   const containerElement = document.createElement('div')
@@ -256,6 +257,7 @@ window.flood.maps.MapContainer = function MapContainer (mapId, options) {
       document.title = options.originalTitle
       // Unlock body scroll
       document.body.classList.remove('defra-map-body')
+      document.documentElement.classList.remove('defra-map-html')
       clearAllBodyScrollLocks()
       // Remove map and return focus
       containerElement.parentNode.removeChild(containerElement)
@@ -436,9 +438,11 @@ window.flood.maps.MapContainer = function MapContainer (mapId, options) {
 
   // Mouse or touch interaction
   containerElement.addEventListener('pointerdown', (e) => {
-    infoElement.blur()
-    keyElement.blur()
     viewport.removeAttribute('keyboard-focus')
+    // Address OpenLayers performance bug when viewport has focus?
+    if (document.activeElement === viewport) {
+      exitMapButtonElement.focus()
+    }
   })
 
   // Disable pinch and double tap zoom

diff --git a/server/src/sass/components/map/_map.scss b/server/src/sass/components/map/_map.scss
@@ -32,6 +32,9 @@
     @include defra-visually-hidden;
   }
 }
+.defra-map-html {
+  height: 100vh;
+}
 .defra-map-body {
   position: fixed;
   overflow: hidden;
@@ -40,6 +43,9 @@
   bottom:0px;
   left:0px;
 }
+.defra-map-visibility-hidden {
+  visibility: hidden;
+}
 .defra-map-viewport {
   -webkit-touch-callout: none;
   -webkit-user-select: none;