Allow document.fullscreenElement to be tether's element parent. Other…

…wise tether is not visible when a non-BODY element is fullscreen. It's because tether reattaches itself to BODY and no BODY's descendant is visible except fullscreenElement.
StileEducation · Sep 27, 2018 · 4ca3d2e · 4ca3d2e
1 parent 192ab8a
commit 4ca3d2e
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 5 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "tether",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "homepage": "http://github.hubspot.com/tether",
   "authors": [
     "Zack Bloom <zackbloom@gmail.com>",

diff --git a/dist/js/tether.js b/dist/js/tether.js
@@ -1252,9 +1252,16 @@ var TetherClass = (function (_Evented) {
             this.options.bodyElement.appendChild(this.element);
           }
         } else {
+          var isFullscreenElement = function isFullscreenElement(e) {
+            var d = e.ownerDocument;
+            var fe = d.fullscreenElement || d.webkitFullscreenElement || d.mozFullScreenElement || d.msFullscreenElement;
+            return fe === e;
+          };
+
           var offsetParentIsBody = true;
+
           var currentNode = this.element.parentNode;
-          while (currentNode && currentNode.nodeType === 1 && currentNode.tagName !== 'BODY') {
+          while (currentNode && currentNode.nodeType === 1 && currentNode.tagName !== 'BODY' && !isFullscreenElement(currentNode)) {
             if (getComputedStyle(currentNode).position !== 'static') {
               offsetParentIsBody = false;
               break;

diff --git a/dist/js/tether.min.js b/dist/js/tether.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tether",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "A client-side library to make absolutely positioned elements attach to elements in the page efficiently.",
   "authors": [
     "Zack Bloom <zackbloom@gmail.com>",

diff --git a/src/js/tether.js b/src/js/tether.js
@@ -765,8 +765,13 @@ class TetherClass extends Evented {
         }
       } else {
         let offsetParentIsBody = true;
+        function isFullscreenElement(e) {
+          let d = e.ownerDocument;
+          let fe = d.fullscreenElement || d.webkitFullscreenElement || d.mozFullScreenElement || d.msFullscreenElement;
+          return fe === e;
+        }
         let currentNode = this.element.parentNode;
-        while (currentNode && currentNode.nodeType === 1 && currentNode.tagName !== 'BODY') {
+        while (currentNode && currentNode.nodeType === 1 && currentNode.tagName !== 'BODY' && !isFullscreenElement(currentNode)) {
           if (getComputedStyle(currentNode).position !== 'static') {
             offsetParentIsBody = false;
             break;