Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dropdown item on hover not rendered properly in Chromium-based browsers.

See original GitHub issue

Describe the bug

When hovering over an item in a dropdown menu, the background of the item overlaps with the border of the menu. Which side overlaps depends on menu alignment (e.g. alignRight).

To Reproduce

Steps to reproduce the behavior:

Go to https://react-bootstrap.github.io/
Click on version dropdown menu.
Hover over any item in the menu.
Observe the right side of the hovered item.

Reproducible Example

https://codesandbox.io/s/icy-violet-2mtsp

Expected behavior

Screenshots

Environment

Windows 10
Chrome 81
Edge 81
React-Bootstrap 1.0.0

Issue Analytics

State:
Created 3 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

khergecommented, Apr 20, 2020

@kosmiq, you nailed it. I am using 4K with 150% scaling.

The issue disappears if I set scaling to 100%.
The issue also appears upstream on Bootstrap’s own website.

Given that this issue is only happening during scaling, this may be a bug in Chromium (related bug?). Since this issue does not appear to be specific to this project, I feel that it can be closed.

0reactions

taioncommented, Apr 20, 2020

Is this happening with upstream Bootstrap, or is it only with React-Bootstrap?