From 41a4e206d824ddaf14528691a55758934872c643 Mon Sep 17 00:00:00 2001
From: Lance <lance@lancesnider.com>
Date: Fri, 15 Nov 2024 09:45:41 -0800
Subject: [PATCH] Fix: Prevent scrollbars from flashing on resize

---
 src/hooks/useRive.tsx | 1 +
 test/useRive.test.tsx | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/hooks/useRive.tsx b/src/hooks/useRive.tsx
index 70f4af3..5448b03 100644
--- a/src/hooks/useRive.tsx
+++ b/src/hooks/useRive.tsx
@@ -29,6 +29,7 @@ function RiveComponent({
   const containerStyle = {
     width: '100%',
     height: '100%',
+    overflow: 'hidden',
     ...style,
   };
 
diff --git a/test/useRive.test.tsx b/test/useRive.test.tsx
index f342420..b30b12f 100644
--- a/test/useRive.test.tsx
+++ b/test/useRive.test.tsx
@@ -428,6 +428,7 @@ describe('useRive', () => {
       <RiveTestComponent className="rive-test-clas" style={{ width: '50%' }} />
     );
     expect(container.firstChild).not.toHaveStyle('width: 50%');
+    expect(container.firstChild).not.toHaveStyle('overflow: hidden');
   });
 
   it('has a canvas size of 0 by default', async () => {
@@ -454,6 +455,7 @@ describe('useRive', () => {
     const { RiveComponent: RiveTestComponent } = result.current;
     const { container } = render(<RiveTestComponent />);
     expect(container.querySelector('canvas')).toHaveStyle('width: 0');
+    expect(container.firstChild).toHaveStyle('overflow: hidden');
   });
 
   it('sets the canvas width and height after calculating the container size', async () => {