[BUG] UI shifting in mobile browser #2488

ed0e522c6de7054b14efc7a72e17d5dcde0e7dcc

Cohee <18619528+Cohee1207@users.noreply.github.com>

public/script.js+2 -1 Viewed

     ensureImageFormatSupported,
     flashHighlight,
     isTrueBoolean,
+    debouncedThrottle,
 } from './scripts/utils.js';
 import { debounce_timeout } from './scripts/constants.js';

         e.style.height = `${e.scrollHeight + 4}px`;
         is_use_scroll_holder = true;
+    }
-    const autoFitEditTextAreaDebounced = debounce(autoFitEditTextArea, debounce_timeout.short);
+    const autoFitEditTextAreaDebounced = debouncedThrottle(autoFitEditTextArea, debounce_timeout.standard);
     document.addEventListener('input', e => {
         if (e.target instanceof HTMLTextAreaElement && e.target.classList.contains('edit_textarea')) {
             const immediately = e.target.scrollHeight > e.target.offsetHeight || e.target.value === '';

public/scripts/utils.js+26 -0 Viewed

+}
 /**
+ * Creates a debounced throttle function that only invokes func at most once per every limit milliseconds.
+ * @param {function} func The function to throttle.
+ * @param {number} [limit=300] The limit in milliseconds.
+ * @returns {function} The throttled function.
+ */
+export function debouncedThrottle(func, limit = 300) {
+    let last, deferTimer;
+    let db = debounce(func);
+    return function() {
+        let now = +new Date, args = arguments;
+        if(!last || (last && now < last + limit)) {
+            clearTimeout(deferTimer);
+            db.apply(this, args);
+            deferTimer = setTimeout(function() {
+                last = now;
+                func.apply(this, args);
+            }, limit);
+        } else {
+            last = now;
+            func.apply(this, args);
+        }
+    };
+}
+/**
  * Checks if an element is in the viewport.
  * @param {Element} el The element to check.
  * @returns {boolean} True if the element is in the viewport, false otherwise.