🐛 Fix jittering on firefox scroll fixed elements

CHANGES.md

@@ -9,6 +9,7 @@
 - Fix problems with double-click and selection [Taiga #4005](https://tree.taiga.io/project/penpot/issue/4005)
 - Fix mismatch between editor and displayed text in workspace [Taiga #3975](https://tree.taiga.io/project/penpot/issue/3975)
 - Fix validation error on text position [Taiga #4010](https://tree.taiga.io/project/penpot/issue/4010)
+- Fix objects jitter while scrolling [Github #2167](https://github.com/penpot/penpot/issues/2167)
 
 ## 1.15.0-beta
 

frontend/src/app/main/ui/viewer.cljs

@@ -32,7 +32,9 @@
    [app.main.ui.viewer.login]
    [app.main.ui.viewer.thumbnails :refer [thumbnails-panel]]
    [app.util.dom :as dom]
+   [app.util.dom.normalize-wheel :as nw]
    [app.util.i18n :as i18n :refer [tr]]
+   [app.util.keyboard :as kbd]
    [app.util.webapi :as wapi]
    [cuerdas.core :as str]
    [goog.events :as events]
@@ -305,7 +307,28 @@
         on-scroll
         (mf/use-fn
          (fn [event]
-           (reset! scroll (dom/get-target-scroll event))))]
+           (reset! scroll (dom/get-target-scroll event))))
+
+        on-wheel
+        (mf/use-fn
+         (fn [event]
+           (let [event  (.getBrowserEvent ^js event)
+                 norm-event ^js (nw/normalize-wheel event)
+                 mod? (kbd/mod? event)
+                 shift? (kbd/shift? event)
+                 delta (.-pixelY norm-event)
+                 viewer-section (mf/ref-val viewer-section-ref)
+                 scroll-pos (if shift?
+                              (dom/get-h-scroll-pos viewer-section)
+                              (dom/get-scroll-pos viewer-section))
+                 new-scroll-pos (+ scroll-pos delta)]
+             (when-not mod?
+               (do
+                 (dom/prevent-default event)
+                 (dom/stop-propagation event)
+                 (if shift?
+                   (dom/set-h-scroll-pos! viewer-section new-scroll-pos)
+                   (dom/set-scroll-pos! viewer-section new-scroll-pos)))))))]
 
     (hooks/use-shortcuts ::viewer sc/shortcuts)
 
@@ -326,10 +349,12 @@
     (mf/with-effect []
       (dom/set-html-theme-color clr/gray-50 "dark")
       (let [key1 (events/listen js/window "click" on-click)
-            key2 (events/listen (mf/ref-val viewer-section-ref) "scroll" on-scroll)]
+            key2 (events/listen (mf/ref-val viewer-section-ref) "scroll" on-scroll #js {"passive" true})
+            key3 (events/listen (mf/ref-val viewer-section-ref) "wheel" on-wheel #js {"passive" false})]
         (fn []
           (events/unlistenByKey key1)
-          (events/unlistenByKey key2))))
+          (events/unlistenByKey key2)
+          (events/unlistenByKey key3))))
 
     (mf/use-layout-effect
      (fn []
@@ -429,13 +454,13 @@
 
      [:div.viewer-content
       [:& header/header {:project project
-                  :index index
-                  :file file
-                  :page page
-                  :frame frame
-                  :permissions permissions
-                  :zoom zoom
-                  :section section}]
+                         :index index
+                         :file file
+                         :page page
+                         :frame frame
+                         :permissions permissions
+                         :zoom zoom
+                         :section section}]
       [:div.thumbnail-close {:on-click #(st/emit! dv/close-thumbnails-panel)
                              :class (dom/classnames :invisible (not (:show-thumbnails local false)))}]
       [:& thumbnails-panel {:frames frames

frontend/src/app/main/ui/workspace/viewport/actions.cljs

@@ -21,8 +21,8 @@
    [app.main.ui.workspace.viewport.utils :as utils]
    [app.util.dom :as dom]
    [app.util.dom.dnd :as dnd]
+   [app.util.dom.normalize-wheel :as nw]
    [app.util.keyboard :as kbd]
-   [app.util.normalize-wheel :as nw]
    [app.util.object :as obj]
    [app.util.timers :as timers]
    [beicon.core :as rx]

frontend/src/app/util/dom.cljs

@@ -484,11 +484,21 @@
   (when (some? element)
     (.-scrollTop element)))
 
+(defn get-h-scroll-pos
+  [^js element]
+  (when (some? element)
+    (.-scrollLeft element)))
+
 (defn set-scroll-pos!
   [^js element scroll]
   (when (some? element)
     (obj/set! element "scrollTop" scroll)))
 
+(defn set-h-scroll-pos!
+  [^js element scroll]
+  (when (some? element)
+    (obj/set! element "scrollLeft" scroll)))
+
 (defn scroll-into-view!
   ([^js element]
    (scroll-into-view! element false))

frontend/src/app/util/dom/normalize_wheel.js

@@ -15,15 +15,10 @@
 
 'use strict';
 
-goog.provide("app.util.normalize_wheel");
+goog.provide("app.util.dom.normalize_wheel");
 
 goog.scope(function() {
-  const self = app.util.normalize_wheel;
-  
-  // const UserAgent_DEPRECATED = require('UserAgent_DEPRECATED');
-
-  // const isEventSupported = require('isEventSupported');
-
+  const self = app.util.dom.normalize_wheel;
 
   // Reasonable defaults
   const PIXEL_STEP  = 10;
@@ -174,6 +169,5 @@ goog.scope(function() {
 
 
   self.normalize_wheel = normalizeWheel;
-  
 });