diff --git a/packages/vaadin-app-layout/src/vaadin-app-layout.js b/packages/vaadin-app-layout/src/vaadin-app-layout.js
index 26f725170f8..31c9df4439a 100644
--- a/packages/vaadin-app-layout/src/vaadin-app-layout.js
+++ b/packages/vaadin-app-layout/src/vaadin-app-layout.js
@@ -513,7 +513,7 @@ class AppLayoutElement extends ElementMixin(ThemableMixin(PolymerElement)) {
 
   /** @protected */
   _updateOverlayMode() {
-    const overlay = getComputedStyle(this).getPropertyValue('--vaadin-app-layout-drawer-overlay') == 'true';
+    const overlay = this._getCustomPropertyValue('--vaadin-app-layout-drawer-overlay') == 'true';
     const drawer = this.$.drawer;
 
     if (!this.overlay && overlay) {
@@ -559,9 +559,15 @@ class AppLayoutElement extends ElementMixin(ThemableMixin(PolymerElement)) {
     this.drawerOpened = false;
   }
 
+  /** @private */
+  _getCustomPropertyValue(customProperty) {
+    const customPropertyValue = getComputedStyle(this).getPropertyValue(customProperty);
+    return (customPropertyValue || '').trim().toLowerCase();
+  }
+
   /** @protected */
   _updateTouchOptimizedMode() {
-    const touchOptimized = getComputedStyle(this).getPropertyValue('--vaadin-app-layout-touch-optimized') == 'true';
+    const touchOptimized = this._getCustomPropertyValue('--vaadin-app-layout-touch-optimized') == 'true';
 
     const navbarItems = this.querySelectorAll('[slot*="navbar"]');
 
diff --git a/packages/vaadin-app-layout/test/app-layout.test.js b/packages/vaadin-app-layout/test/app-layout.test.js
index 6f5bc747d7f..ffa020e65e7 100644
--- a/packages/vaadin-app-layout/test/app-layout.test.js
+++ b/packages/vaadin-app-layout/test/app-layout.test.js
@@ -158,6 +158,9 @@ describe('vaadin-app-layout', () => {
     });
 
     it('should not close on navigation event when not in overlay mode', () => {
+      // force it to desktop layout
+      layout.style.setProperty('--vaadin-app-layout-drawer-overlay', 'false');
+      layout._updateOverlayMode();
       layout.drawerOpened = true;
       window.dispatchEvent(new CustomEvent('vaadin-router-location-changed'));
       expect(layout.drawerOpened).to.be.true;
diff --git a/packages/vaadin-app-layout/test/visual/lumo/app-layout.test.js b/packages/vaadin-app-layout/test/visual/lumo/app-layout.test.js
index a89afa05b73..c50bc08a125 100644
--- a/packages/vaadin-app-layout/test/visual/lumo/app-layout.test.js
+++ b/packages/vaadin-app-layout/test/visual/lumo/app-layout.test.js
@@ -41,6 +41,13 @@ describe('app-layout', () => {
         element.primarySection = 'drawer';
         await visualDiff(div, `app-layout:${dir}-primary-drawer`);
       });
+
+      it('overlay', async () => {
+        // See https://github.com/vaadin/vaadin-app-layout/issues/183
+        element.style.setProperty('--vaadin-app-layout-drawer-overlay', ' true');
+        window.dispatchEvent(new Event('resize'));
+        await visualDiff(div, `app-layout:${dir}-overlay`);
+      });
     });
   });
 });
diff --git a/packages/vaadin-app-layout/test/visual/material/app-layout.test.js b/packages/vaadin-app-layout/test/visual/material/app-layout.test.js
index ae7f3e5d320..bc4221dbae6 100644
--- a/packages/vaadin-app-layout/test/visual/material/app-layout.test.js
+++ b/packages/vaadin-app-layout/test/visual/material/app-layout.test.js
@@ -41,6 +41,13 @@ describe('app-layout', () => {
         element.primarySection = 'drawer';
         await visualDiff(div, `app-layout:${dir}-primary-drawer`);
       });
+
+      it('overlay', async () => {
+        // See https://github.com/vaadin/vaadin-app-layout/issues/183
+        element.style.setProperty('--vaadin-app-layout-drawer-overlay', ' true');
+        window.dispatchEvent(new Event('resize'));
+        await visualDiff(div, `app-layout:${dir}-overlay`);
+      });
     });
   });
 });
diff --git a/screenshots/lumo/chrome/baseline/app-layout/ltr-overlay.png b/screenshots/lumo/chrome/baseline/app-layout/ltr-overlay.png
new file mode 100644
index 00000000000..b0210ab3c1b
Binary files /dev/null and b/screenshots/lumo/chrome/baseline/app-layout/ltr-overlay.png differ
diff --git a/screenshots/lumo/chrome/baseline/app-layout/rtl-overlay.png b/screenshots/lumo/chrome/baseline/app-layout/rtl-overlay.png
new file mode 100644
index 00000000000..ac0f6ab6cc4
Binary files /dev/null and b/screenshots/lumo/chrome/baseline/app-layout/rtl-overlay.png differ
diff --git a/screenshots/material/chrome/baseline/app-layout/ltr-overlay.png b/screenshots/material/chrome/baseline/app-layout/ltr-overlay.png
new file mode 100644
index 00000000000..e3c4f613ee9
Binary files /dev/null and b/screenshots/material/chrome/baseline/app-layout/ltr-overlay.png differ
diff --git a/screenshots/material/chrome/baseline/app-layout/rtl-overlay.png b/screenshots/material/chrome/baseline/app-layout/rtl-overlay.png
new file mode 100644
index 00000000000..88d6080a157
Binary files /dev/null and b/screenshots/material/chrome/baseline/app-layout/rtl-overlay.png differ