Merge pull request #317 from inokawa/vue-style

Update style of Vue VList to be the same as React
inokawa · Jan 8, 2024 · 5b7d354 · 5b7d354
2 parents 08c16cc + 8e0ebe9
commit 5b7d354
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 deletions.
diff --git a/src/vue/VList.tsx b/src/vue/VList.tsx
@@ -236,6 +236,8 @@ export const VList = /*#__PURE__*/ defineComponent({
           <div
             style={{
               contain: "content",
+              overflowAnchor: "none", // opt out browser's scroll anchoring because it will conflict to scroll anchoring of virtualizer
+              flex: "none", // flex style on parent can break layout
               position: "relative",
               visibility: "hidden",
               width: isHorizontal ? totalSize + "px" : "100%",

diff --git a/src/vue/__snapshots__/VList.spec.ts.snap b/src/vue/__snapshots__/VList.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`horizontal should render 0 children 1`] = `
       style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;"
     >
       <div
-        style="contain: content; position: relative; visibility: hidden; width: 0px; height: 100%; min-width: 0; pointer-events: auto;"
+        style="contain: content; flex: 0 0 auto; position: relative; visibility: hidden; width: 0px; height: 100%; min-width: 0; pointer-events: auto;"
       />
     </div>
   </div>
@@ -21,7 +21,7 @@ exports[`horizontal should render 1 children 1`] = `
       style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;"
     >
       <div
-        style="contain: content; position: relative; visibility: hidden; width: 40px; height: 100%; min-width: 40; pointer-events: auto;"
+        style="contain: content; flex: 0 0 auto; position: relative; visibility: hidden; width: 40px; height: 100%; min-width: 40; pointer-events: auto;"
       >
         <div
           style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; visibility: hidden; display: flex;"
@@ -43,7 +43,7 @@ exports[`horizontal should render 5 children 1`] = `
       style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;"
     >
       <div
-        style="contain: content; position: relative; visibility: hidden; width: 200px; height: 100%; min-width: 200; pointer-events: auto;"
+        style="contain: content; flex: 0 0 auto; position: relative; visibility: hidden; width: 200px; height: 100%; min-width: 200; pointer-events: auto;"
       >
         <div
           style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; visibility: hidden; display: flex;"
@@ -93,7 +93,7 @@ exports[`horizontal should render 100 children 1`] = `
       style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;"
     >
       <div
-        style="contain: content; position: relative; visibility: hidden; width: 4000px; height: 100%; min-width: 4000; pointer-events: auto;"
+        style="contain: content; flex: 0 0 auto; position: relative; visibility: hidden; width: 4000px; height: 100%; min-width: 4000; pointer-events: auto;"
       >
         <div
           style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; visibility: hidden; display: flex;"
@@ -143,7 +143,7 @@ exports[`horizontal should render 1000 children 1`] = `
       style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;"
     >
       <div
-        style="contain: content; position: relative; visibility: hidden; width: 40000px; height: 100%; min-width: 40000; pointer-events: auto;"
+        style="contain: content; flex: 0 0 auto; position: relative; visibility: hidden; width: 40000px; height: 100%; min-width: 40000; pointer-events: auto;"
       >
         <div
           style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; visibility: hidden; display: flex;"
@@ -193,7 +193,7 @@ exports[`horizontal should render 10000 children 1`] = `
       style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;"
     >
       <div
-        style="contain: content; position: relative; visibility: hidden; width: 400000px; height: 100%; min-width: 400000; pointer-events: auto;"
+        style="contain: content; flex: 0 0 auto; position: relative; visibility: hidden; width: 400000px; height: 100%; min-width: 400000; pointer-events: auto;"
       >
         <div
           style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; visibility: hidden; display: flex;"
@@ -243,7 +243,7 @@ exports[`horizontal should render component 1`] = `
       style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;"
     >
       <div
-        style="contain: content; position: relative; visibility: hidden; width: 120px; height: 100%; min-width: 120; pointer-events: auto;"
+        style="contain: content; flex: 0 0 auto; position: relative; visibility: hidden; width: 120px; height: 100%; min-width: 120; pointer-events: auto;"
       >
         <div
           style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; visibility: hidden; display: flex;"
@@ -279,7 +279,7 @@ exports[`horizontal should render with given width / height 1`] = `
       style="display: inline-block; overflow-x: auto; contain: strict; width: 100px; height: 800px;"
     >
       <div
-        style="contain: content; position: relative; visibility: hidden; width: 200px; height: 100%; min-width: 200; pointer-events: auto;"
+        style="contain: content; flex: 0 0 auto; position: relative; visibility: hidden; width: 200px; height: 100%; min-width: 200; pointer-events: auto;"
       >
         <div
           style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; visibility: hidden; display: flex;"
@@ -334,7 +334,7 @@ exports[`should pass attributes to element 1`] = `
       tab-index="0"
     >
       <div
-        style="contain: content; position: relative; visibility: hidden; width: 100%; height: 40px; min-height: 40; pointer-events: auto;"
+        style="contain: content; flex: 0 0 auto; position: relative; visibility: hidden; width: 100%; height: 40px; min-height: 40; pointer-events: auto;"
       >
         <div
           style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: hidden;"
@@ -356,7 +356,7 @@ exports[`vertical should render 0 children 1`] = `
       style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
     >
       <div
-        style="contain: content; position: relative; visibility: hidden; width: 100%; height: 0px; min-height: 0; pointer-events: auto;"
+        style="contain: content; flex: 0 0 auto; position: relative; visibility: hidden; width: 100%; height: 0px; min-height: 0; pointer-events: auto;"
       />
     </div>
   </div>
@@ -370,7 +370,7 @@ exports[`vertical should render 1 children 1`] = `
       style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
     >
       <div
-        style="contain: content; position: relative; visibility: hidden; width: 100%; height: 40px; min-height: 40; pointer-events: auto;"
+        style="contain: content; flex: 0 0 auto; position: relative; visibility: hidden; width: 100%; height: 40px; min-height: 40; pointer-events: auto;"
       >
         <div
           style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: hidden;"
@@ -392,7 +392,7 @@ exports[`vertical should render 5 children 1`] = `
       style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
     >
       <div
-        style="contain: content; position: relative; visibility: hidden; width: 100%; height: 200px; min-height: 200; pointer-events: auto;"
+        style="contain: content; flex: 0 0 auto; position: relative; visibility: hidden; width: 100%; height: 200px; min-height: 200; pointer-events: auto;"
       >
         <div
           style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: hidden;"
@@ -442,7 +442,7 @@ exports[`vertical should render 100 children 1`] = `
       style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
     >
       <div
-        style="contain: content; position: relative; visibility: hidden; width: 100%; height: 4000px; min-height: 4000; pointer-events: auto;"
+        style="contain: content; flex: 0 0 auto; position: relative; visibility: hidden; width: 100%; height: 4000px; min-height: 4000; pointer-events: auto;"
       >
         <div
           style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: hidden;"
@@ -492,7 +492,7 @@ exports[`vertical should render 1000 children 1`] = `
       style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
     >
       <div
-        style="contain: content; position: relative; visibility: hidden; width: 100%; height: 40000px; min-height: 40000; pointer-events: auto;"
+        style="contain: content; flex: 0 0 auto; position: relative; visibility: hidden; width: 100%; height: 40000px; min-height: 40000; pointer-events: auto;"
       >
         <div
           style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: hidden;"
@@ -542,7 +542,7 @@ exports[`vertical should render 10000 children 1`] = `
       style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
     >
       <div
-        style="contain: content; position: relative; visibility: hidden; width: 100%; height: 400000px; min-height: 400000; pointer-events: auto;"
+        style="contain: content; flex: 0 0 auto; position: relative; visibility: hidden; width: 100%; height: 400000px; min-height: 400000; pointer-events: auto;"
       >
         <div
           style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: hidden;"
@@ -592,7 +592,7 @@ exports[`vertical should render component 1`] = `
       style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
     >
       <div
-        style="contain: content; position: relative; visibility: hidden; width: 100%; height: 120px; min-height: 120; pointer-events: auto;"
+        style="contain: content; flex: 0 0 auto; position: relative; visibility: hidden; width: 100%; height: 120px; min-height: 120; pointer-events: auto;"
       >
         <div
           style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: hidden;"
@@ -628,7 +628,7 @@ exports[`vertical should render with given width / height 1`] = `
       style="display: block; overflow-y: auto; contain: strict; width: 100px; height: 800px;"
     >
       <div
-        style="contain: content; position: relative; visibility: hidden; width: 100%; height: 200px; min-height: 200; pointer-events: auto;"
+        style="contain: content; flex: 0 0 auto; position: relative; visibility: hidden; width: 100%; height: 200px; min-height: 200; pointer-events: auto;"
       >
         <div
           style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: hidden;"