Description
Prerequisites
- I am using the correct version of React-Bootstrap for my version of Bootstrap
- I have searched for duplicate or closed issues
- I have read the contributing guidelines
Describe the bug
When zooming in or out using a trackpad, the dropdown menu in React Bootstrap shifts position and becomes misaligned with the dropdown toggle button. This issue does not occur when zooming using browser controls or a mouse, where the website remains responsive and the dropdown menu stays properly aligned.
Expected behavior
The dropdown menu should stay aligned with the dropdown toggle button regardless of the zoom method. Users should be able to zoom in and out using their trackpad without the dropdown menu shifting its position.
To Reproduce
Implement the Dropdown component from React Bootstrap in a React application.
Open the application in a web browser.
Click on the dropdown toggle button to open the dropdown menu.
Use a trackpad to zoom in (pinch to zoom) or zoom out.
Observe that the dropdown menu shifts position and becomes misaligned with the dropdown toggle button.
Reproducible Example
https://codesandbox.io/p/devbox/dev-cz7nxd
Screenshots
Here is a screenshot showing the misaligned dropdown menu after zooming with a trackpad
This is a official website here also this issue occur.
You can observe it by zooming in using trackpad then scroll horizontally then dropdown menu shifts, as shown in attached images.
here is a video of issue
Dropdowns._.React.Bootstrap.mp4
Below is sandbox host screenshoot
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome
What version of React-Bootstrap are you using?
2.10.2
What version of Bootstrap are you using?
5.3.3
Additional context
This issue occurs consistently across different browsers and operating systems when zooming is performed using a trackpad. The problem does not appear when zooming with browser controls or a mouse. Addressing this issue will improve the user experience, particularly for users who rely on trackpad gestures for navigation.