fix: fix size NaN (#834)

naver · Nov 8, 2023 · 6927c3e · 6927c3e
1 parent bd3a341
commit 6927c3e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/src/utils.ts b/src/utils.ts
@@ -313,33 +313,36 @@ export const getElementSize = ({
   useOffset: boolean;
   style: CSSStyleDeclaration;
 }): number => {
+  let size = 0;
   if (useFractionalSize) {
-    const baseSize = parseFloat(horizontal ? style.width : style.height);
+    const baseSize = parseFloat(horizontal ? style.width : style.height) || 0;
     const isBorderBoxSizing = style.boxSizing === "border-box";
     const border = horizontal
       ? parseFloat(style.borderLeftWidth || "0") + parseFloat(style.borderRightWidth || "0")
       : parseFloat(style.borderTopWidth || "0") + parseFloat(style.borderBottomWidth || "0");
 
     if (isBorderBoxSizing) {
-      return useOffset
+      size = useOffset
         ? baseSize
         : baseSize - border;
     } else {
       const padding = horizontal
         ? parseFloat(style.paddingLeft || "0") + parseFloat(style.paddingRight || "0")
         : parseFloat(style.paddingTop || "0") + parseFloat(style.paddingBottom || "0");
 
-      return useOffset
+      size = useOffset
         ? baseSize + padding + border
         : baseSize + padding;
     }
   } else {
     const sizeStr = horizontal ? "Width" : "Height";
 
-    return useOffset
+    size = useOffset
       ? el[`offset${sizeStr}`]
       : el[`client${sizeStr}`];
   }
+
+  return Math.max(size, 0);
 };
 
 export const setPrototypeOf = Object.setPrototypeOf || ((obj, proto) => {

diff --git a/test/unit/Flicking.spec.ts b/test/unit/Flicking.spec.ts
@@ -1057,6 +1057,16 @@ describe("Flicking", () => {
       expect(flicking.camera.position).to.equal(flicking.panels[0].position);
       expect(flicking.camera.element.style.transform).to.equal("translate(0px)");
     });
+    it("should have zero size with not appended elements", async () => {
+      const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { autoInit: false });
+
+      flicking.viewport.element.remove();
+      flicking.init(); // Not awaiting on purpose
+
+      expect(flicking.viewport.width).equal(0);
+      expect(flicking.viewport.height).equal(0);
+      expect(flicking.panels.every(panel => panel.size === 0)).equal(true);
+    });
 
     it("should place camera & panels at correct position on circular rendering", async () => {
       const flicking = await createFlicking(