From a0cc8a06b682c5fea545f6d226f1925e9ee9ff9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Moya?= <andres.moya@kaleidos.net>
Date: Fri, 3 Jun 2022 16:29:47 +0200
Subject: [PATCH] :bug: Fix auto scroll layers panel in firefox

---
 CHANGES.md                                    |  1 +
 .../polyfills/scrollIntoViewIfNeeded.js       | 22 ++++++++++---------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 64657c165..7aac0c0ff 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -19,6 +19,7 @@
 - Remove default font on team change
 - Fix github auth without name
 - Fix problems with font loading in Firefox 95
+- Fix auto scroll layers in Firefox [Taiga #3531](https://tree.taiga.io/project/penpot/issue/3531)
 
 ## 1.13.2-beta
 
diff --git a/frontend/resources/polyfills/scrollIntoViewIfNeeded.js b/frontend/resources/polyfills/scrollIntoViewIfNeeded.js
index a341b3e40..16763f504 100644
--- a/frontend/resources/polyfills/scrollIntoViewIfNeeded.js
+++ b/frontend/resources/polyfills/scrollIntoViewIfNeeded.js
@@ -3,8 +3,9 @@
     Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) {
       centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded;
 
-      var parent = this.parentNode,
-          parentComputedStyle = window.getComputedStyle(parent, null),
+      var parent = this.parentNode;
+      if (parent) {
+        var parentComputedStyle = window.getComputedStyle(parent, null),
           parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width')),
           parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width')),
           overTop = this.offsetTop - parent.offsetTop < parent.scrollTop,
@@ -13,14 +14,15 @@
           overRight = (this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth) > (parent.scrollLeft + parent.clientWidth),
           alignWithTop = overTop && !overBottom;
 
-      if ((overTop || overBottom) && centerIfNeeded) {
-        parent.scrollTop = this.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + this.clientHeight / 2;
-      }
-      if ((overLeft || overRight) && centerIfNeeded) {
-        parent.scrollLeft = this.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + this.clientWidth / 2;
-      }
-      if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) {
-        this.scrollIntoView(alignWithTop);
+        if ((overTop || overBottom) && centerIfNeeded) {
+          parent.scrollTop = this.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + this.clientHeight / 2;
+        }
+        if ((overLeft || overRight) && centerIfNeeded) {
+          parent.scrollLeft = this.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + this.clientWidth / 2;
+        }
+        if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) {
+          this.scrollIntoView(alignWithTop);
+        }
       }
     };
   }