Fix: Prevent scrollbars from flashing on resize

[lancesnider]

The Problem

When the Rive component is full width/height and you resize the page, you sometimes see the scrollbars flash on/off. When you zoom in on your browser, sometimes it gets stuck in a loop the scrollbars flashing on/off.

Why is this happening?

rive-react listens for a window resize then updates the canvas CSS width/height. There's an instant when the page has a new width, but the CSS hasn't updated yet.

When you zoom in to a certain level, it looks like it triggers another resize every time the scrollbars appear or disappear.

The fix

Add overflow: hidden to the container div that holds the canvas element.

Testing

There are 2 new tests:

• Make sure the container includes the overflow: hidden CSS style
• If the user includes a className in the <RiveComponent>, make sure we don't include the new CSS style

Run npm test

Other things to test:

• Check out each of the existing examples to make sure nothing changed
• Scale a fullscreen rive element to make sure you don't see scrollbars
• Cmd +/- a fullscreen rive element to make sure you don't see scrollbars