diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9371d1f237c279e558a3db3edbcb94127a476989..97dd75731a089ee0902469b77b7dec520b36887f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,9 +5,9 @@ Note that since we don't clearly distinguish between a public and private interf
 
 
 ## [Unreleased]
+- Handle resizes of viewer element even when window remains the same size
 - Selection toggle buttons hidden if selection mode is off
 - Camera focus loci bindings allow reset on click-away to be overridden
-
 - Input/controls improvements
     - Move or fly around the scene using keys
     - Pointer lock to look around scene
diff --git a/src/mol-util/input/input-observer.ts b/src/mol-util/input/input-observer.ts
index cca94225abf44e9e6d7530026c826b1269465f04..0764c6c88ab1876dae1433c8ff0c06e083b955fb 100644
--- a/src/mol-util/input/input-observer.ts
+++ b/src/mol-util/input/input-observer.ts
@@ -3,6 +3,7 @@
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Russell Parker <russell@benchling.com>
  */
 
 import { Subject, Observable } from 'rxjs';
@@ -360,6 +361,11 @@ namespace InputObserver {
         let isInside = false;
         let hasMoved = false;
 
+        let resizeObserver: ResizeObserver | undefined;
+        if (typeof window.ResizeObserver !== 'undefined') {
+            resizeObserver = new window.ResizeObserver(onResize);
+        }
+
         const events = createEvents();
         const { drag, interactionEnd, wheel, pinch, gesture, click, move, leave, enter, resize, modifiers, key, keyUp, keyDown, lock } = events;
 
@@ -393,7 +399,11 @@ namespace InputObserver {
             document.addEventListener('pointerlockchange', onPointerLockChange, false);
             document.addEventListener('pointerlockerror', onPointerLockError, false);
 
-            window.addEventListener('resize', onResize, false);
+            if (resizeObserver != null) {
+                resizeObserver.observe(element.parentElement!);
+            } else {
+                window.addEventListener('resize', onResize, false);
+            }
         }
 
         function dispose() {
@@ -423,9 +433,14 @@ namespace InputObserver {
             document.removeEventListener('pointerlockchange', onPointerLockChange, false);
             document.removeEventListener('pointerlockerror', onPointerLockError, false);
 
-            window.removeEventListener('resize', onResize, false);
-
             cross.remove();
+
+            if (resizeObserver != null) {
+                resizeObserver.unobserve(element.parentElement!);
+                resizeObserver.disconnect();
+            } else {
+                window.removeEventListener('resize', onResize, false);
+            }
         }
 
         function onPointerLockChange() {
@@ -773,7 +788,7 @@ namespace InputObserver {
             gestureDelta(ev, true);
         }
 
-        function onResize(ev: Event) {
+        function onResize() {
             resize.next({});
         }