firefox bug fix progress

README.md

@@ -51,6 +51,10 @@ import { Smoothie } from "vue-smoothie";
 - **`Smoothie`** - use this when you only need vertical scroll.
 - **`OmniSmoothie`** - use this when you need both vertical and horizontal scroll. In this case prefer using OmniSmoothie component for all scrollable areas even if they're vertical-only to prevent bundling both flavors simultaneously.
 
+```
+⚠ Currently there's a bug on Firefox for horizontal scroll, which adds an extra scroll space based on scroll speed
+```
+
 ### `weight` prop
 
 You can setup how smooth the scrolling is by specifying an _optional_ `weight` prop:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-smoothie",
   "description": "🍹 Next-gen native smooth scrolling component library for Vue 3",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": "ZEOKKU <[email protected]>",
   "funding": "https://ko-fi.com/zeokku",
   "license": "MIT",

src/App.vue

@@ -76,13 +76,25 @@ Smoothie.container(:weight="scrollWeight" ref="container")
   .content-wrap
     a#top(href="#bottom") {{ 'Go to the #bottom' }}
     .content
-      OmniSmoothie.nested-container(:weight="0.1")
-        div {{ 'NESTED CONTAINER\n' + longText }}
+      Smoothie.nested-container(:weight="0.1")
+        div
+          span(:style="{color: 'orangered'}") NESTED CONTAINER 
+          | {{longText }}
+      OmniSmoothie.nested-container(:weight="0.3")
+        div
+          span(:style="{color: 'orangered'}") NESTED VERTICAL WITH OMNI FLAVOR 
+          | {{longText }}
       OmniSmoothie.horizontal-container
-        div(:style="{ width: '200rem' }") {{ 'HORIZONTAL WORKS IN OMNI FLAVOR\n' + longText }}
+        div(:style="{ width: '200rem' }") 
+          span(:style="{color: 'orangered'}") HORIZONTAL SCROLL 
+          | {{longText }}
+      OmniSmoothie.bidirectional-container
+        div(:style="{ width: '75rem', background: '#6d3300' }") 
+          span(:style="{color: 'orangered'}") BIDERECTIONAL SCROLL 
+          | {{longText }}
       template(v-for="(image, index) in images")
-        img(:src="image" :style="{ gridColumn: index % 2 + 1, gridRow: index + 2 }")
-        div(:style="{ gridColumn: (index + 1) % 2 + 1, gridRow: index + 2 }") {{ paragraphs[index] }}
+        img(:src="image" :style="{ gridColumn: index % 2 + 1, gridRow: index + 4 }")
+        div(:style="{ gridColumn: (index + 1) % 2 + 1, gridRow: index + 4 }") {{ paragraphs[index] }}
     a#bottom(href="#top") {{ 'Go to the #top' }}
 </template>
 
@@ -138,8 +150,18 @@ body,
 }
 
 .horizontal-container {
-  height: 20rem;
   width: 100%;
+
+  grid-row: 2;
+  grid-column: 1 / 3;
+}
+
+.bidirectional-container {
+  height: 10rem;
+  width: 100%;
+
+  grid-row: 3;
+  grid-column: 1 / 3;
 }
 
 a {

src/components/Smoothie.vue

@@ -50,8 +50,9 @@ let contentStyle = ({
   // width: '100%', // inherit parent size
 
   position: 'absolute',
-  left: 0,
-  right: 0
+  width: '100%'
+  // left: 0,
+  // right: 0
 
   // maxHeight: 0
 } as CSSProperties
@@ -110,14 +111,37 @@ const onScroll = () => {
 }
 
 // don't forget this callback will be fired on old dom element removal, so technically it will update size twice, which shouldn't be a problem, though
-const updateSpacer = () => {
+const update = () => {
   console.log(
     'content', content!.scrollHeight, //
     'content wrap', content!.parentElement!.scrollHeight,
     'wrap', wrap!.scrollHeight
   )
 
   if (import.meta.env.__OMNI) {
+    //#region firefox horizontal scroll width fix
+    // the fix below works well, BUT resize observer won't trigger for the content element
+    // so stash it for later
+
+    // @note on firefox if sticky has any width, container's scroll width will always bug out and randomly add some extra width based on scroll speed.
+    // one fix is to set sticky's width to 0 BUT in this case vertical scroll breaks,
+    // as content has width: 100%
+    // the solution is to set 
+
+    let contentWrap = content!.parentElement!;
+
+    contentWrap.style.width = '';
+    // // @note this is required so we get a correct scrollWidth from the content wrap
+    // content!.style.maxWidth = '';
+
+    content!.style.minWidth = contentWrap.scrollWidth + 'px';
+    content!.style.width = '';
+
+    contentWrap.style.width = '0';
+
+    //#endregion
+
+    // update spacer
     spacer!.style.width = content!.scrollWidth + 'px';
     spacer!.style.height = content!.scrollHeight + 'px';
   }
@@ -133,7 +157,7 @@ const updateSpacer = () => {
 }
 
 
-let resizeObserver = new ResizeObserver(updateSpacer)
+let resizeObserver = new ResizeObserver(update)
 
 
 onMounted(() => {
@@ -142,7 +166,7 @@ onMounted(() => {
 
 
   // in case of hard defined dimensions, resize observer won't trigger, so do init run
-  updateSpacer()
+  update()