From c69bf9fd352cce346949a548df92b7a7749f2586 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Tue, 30 Aug 2022 10:41:15 +0200 Subject: [PATCH] :bug: Fix jittering on firefox scroll fixed elements --- CHANGES.md | 1 + frontend/src/app/main/ui/viewer.cljs | 45 ++++++++++++++----- .../main/ui/workspace/viewport/actions.cljs | 2 +- frontend/src/app/util/dom.cljs | 10 +++++ frontend/src/app/util/dom/normalize_wheel.js | 10 +---- 5 files changed, 49 insertions(+), 19 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index f1227c8e4..157fa194c 100644 --- a/CHANGES.md +++ b/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 diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index 0ccf2d9bb..22ee371f0 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/viewport/actions.cljs b/frontend/src/app/main/ui/workspace/viewport/actions.cljs index 2a75401ad..88ce201be 100644 --- a/frontend/src/app/main/ui/workspace/viewport/actions.cljs +++ b/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] diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index 66614023a..56d8c68a8 100644 --- a/frontend/src/app/util/dom.cljs +++ b/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)) diff --git a/frontend/src/app/util/dom/normalize_wheel.js b/frontend/src/app/util/dom/normalize_wheel.js index fc221e54c..69efb2bc1 100644 --- a/frontend/src/app/util/dom/normalize_wheel.js +++ b/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; - });