Preserve page scroll position on fullscreen change

dist/panzoom.css

@@ -1 +1 @@
-.panzoom{position:relative;overflow:hidden}.panzoom__content{max-width:100%;max-height:100%;object-fit:contain;transform:translate3d(0, 0, 0) scale(1);transform-origin:0 0;touch-action:none;user-select:none}.is-draggable{cursor:move;cursor:grab}.is-dragging{cursor:grabbing}
+.panzoom{position:relative;overflow:hidden}.panzoom__content{max-width:100%;max-height:100%;object-fit:contain;transform:translate3d(0, 0, 0) scale(1);transform-origin:0 0;transition:unset;touch-action:none;user-select:none}.is-draggable{cursor:move;cursor:grab}.is-dragging{cursor:grabbing}

package-lock.json

@@ -15,7 +15,7 @@
         "@rollup/plugin-node-resolve": "^13.0.4",
         "@rollup/plugin-replace": "^3.0.0",
         "chai": "^4.3.4",
-        "core-js": "^3.16.0",
+        "core-js": "^3.16.1",
         "husky": "^7.0.1",
         "karma": "^6.3.4",
         "karma-chai": "^0.1.0",
@@ -26,7 +26,7 @@
         "prettier": "2.3.2",
         "pretty-quick": "^3.1.1",
         "puppeteer": "^10.2.0",
-        "rollup": "^2.56.0",
+        "rollup": "^2.56.2",
         "rollup-plugin-babel": "^4.4.0",
         "rollup-plugin-banner": "^0.2.1",
         "rollup-plugin-eslint": "^7.0.0",
@@ -3022,9 +3022,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.0.tgz",
-      "integrity": "sha512-5+5VxRFmSf97nM8Jr2wzOwLqRo6zphH2aX+7KsAUONObyzakDNq2G/bgbhinxB4PoV9L3aXQYhiDKyIKWd2c8g==",
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.1.tgz",
+      "integrity": "sha512-AAkP8i35EbefU+JddyWi12AWE9f2N/qr/pwnDtWz4nyUIBGMJPX99ANFFRSw6FefM374lDujdtLDyhN2A/btHw==",
       "dev": true,
       "hasInstallScript": true,
       "funding": {
@@ -7424,9 +7424,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "2.56.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.0.tgz",
-      "integrity": "sha512-weEafgbjbHCnrtJPNyCrhYnjP62AkF04P0BcV/1mofy1+gytWln4VVB1OK462cq2EAyWzRDpTMheSP/o+quoiA==",
+      "version": "2.56.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.2.tgz",
+      "integrity": "sha512-s8H00ZsRi29M2/lGdm1u8DJpJ9ML8SUOpVVBd33XNeEeL3NVaTiUcSBHzBdF3eAyR0l7VSpsuoVUGrRHq7aPwQ==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -11283,9 +11283,9 @@
       "dev": true
     },
     "core-js": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.0.tgz",
-      "integrity": "sha512-5+5VxRFmSf97nM8Jr2wzOwLqRo6zphH2aX+7KsAUONObyzakDNq2G/bgbhinxB4PoV9L3aXQYhiDKyIKWd2c8g==",
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.1.tgz",
+      "integrity": "sha512-AAkP8i35EbefU+JddyWi12AWE9f2N/qr/pwnDtWz4nyUIBGMJPX99ANFFRSw6FefM374lDujdtLDyhN2A/btHw==",
       "dev": true
     },
     "core-js-compat": {
@@ -14664,9 +14664,9 @@
       }
     },
     "rollup": {
-      "version": "2.56.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.0.tgz",
-      "integrity": "sha512-weEafgbjbHCnrtJPNyCrhYnjP62AkF04P0BcV/1mofy1+gytWln4VVB1OK462cq2EAyWzRDpTMheSP/o+quoiA==",
+      "version": "2.56.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.2.tgz",
+      "integrity": "sha512-s8H00ZsRi29M2/lGdm1u8DJpJ9ML8SUOpVVBd33XNeEeL3NVaTiUcSBHzBdF3eAyR0l7VSpsuoVUGrRHq7aPwQ==",
       "dev": true,
       "requires": {
         "fsevents": "~2.3.2"

package.json

@@ -63,7 +63,7 @@
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-replace": "^3.0.0",
     "chai": "^4.3.4",
-    "core-js": "^3.16.0",
+    "core-js": "^3.16.1",
     "husky": "^7.0.1",
     "karma": "^6.3.4",
     "karma-chai": "^0.1.0",
@@ -74,7 +74,7 @@
     "prettier": "2.3.2",
     "pretty-quick": "^3.1.1",
     "puppeteer": "^10.2.0",
-    "rollup": "^2.56.0",
+    "rollup": "^2.56.2",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-banner": "^0.2.1",
     "rollup-plugin-eslint": "^7.0.0",

src/Fancybox/plugins/Toolbar/Toolbar.js

@@ -216,6 +216,10 @@ export class Toolbar {
     }
   }
 
+  onFsChange() {
+    window.scrollTo(Fullscreen.pageXOffset, Fullscreen.pageYOffset);
+  }
+
   onSettle() {
     if (this.Slideshow && this.Slideshow.isActive()) {
       if (
@@ -273,6 +277,8 @@ export class Toolbar {
     if (this.Slideshow) {
       this.Slideshow.deactivate();
     }
+
+    document.removeEventListener("fullscreenchange", this.onFsChange);
   }
 
   /**
@@ -357,8 +363,12 @@ export class Toolbar {
         continue;
       }
 
-      if (id === "fullscreen" && (!document.fullscreenEnabled || window.fullScreen)) {
-        continue;
+      if (id === "fullscreen") {
+        if (!document.fullscreenEnabled || window.fullScreen) {
+          continue;
+        }
+
+        document.addEventListener("fullscreenchange", this.onFsChange);
       }
 
       if (id === "thumbs" && (!thumbs || thumbs.state === "disabled")) {

src/Panzoom/scss/base.scss

@@ -11,6 +11,7 @@
 
   transform: translate3d(0, 0, 0) scale(1);
   transform-origin: 0 0;
+  transition: unset;
 
   /* Disable default manipulations by a touchscreen user. For example, zooming features built into the browser */
   touch-action: none;

src/shared/utils/Fullscreen.js

@@ -1,9 +1,15 @@
 export const Fullscreen = {
+  pageXOffset: 0,
+  pageYOffset: 0,
+
   element() {
     return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
   },
 
   activate(element) {
+    Fullscreen.pageXOffset = window.pageXOffset;
+    Fullscreen.pageYOffset = window.pageYOffset;
+
     if (element.requestFullscreen) {
       element.requestFullscreen(); // W3C spec
     } else if (element.mozRequestFullScreen) {