Horizontal scrollbar is visible during animation

[marknorrapscm]

Issue description

During the slide down animation, a horizontal scrollbar temporarily appears. It disappears when the animation completes.

Steps to reproduce the issue

This is not visible on the demo and I have not cloned the repo to test it, so this may be specific to my project. However, given that my setup is fairly typical - React with react-bootstrap using Bootstrap v5 - I imagine that it will appear for others. I am animating the opening and closing of a Bootstrap row.

Here is my code:

import React, { useEffect, useState } from "react";
import { Col, Form, Row } from "react-bootstrap";
import SlideDown from "react-slidedown";
import "react-slidedown/lib/slidedown.css";

// Rest of component...

<SlideDown className="my-dropdown-slidedown" closed={isClosed}>
	<Form.Group as={Row} className="justify-content-center mt-2">
		<Form.Label column sm={3}>Street:</Form.Label>
		<Col sm={6}>
			<Form.Control
				type="text"
				name="street"
				required
			/>
		</Col>
	</Form.Group>
</SlideDown>

Solution

I resolved this issue by applying the following CSS:

.my-dropdown-slidedown {
    overflow-x: hidden;
}

I can create a PR later for this; it would be great if @frankwallis could sanity check this.

Additional details / screenshot

Show / hide GIF

---