regression in hr rendering since bootstrap 5
Created by: kusma
The rendering of horizontal rulers have completely changed in Bootstrap 5 vs Bootstrap 4, and the change is not documented in the migration guide.
In Bootstrap 4:
- 1 px border top was used
- The border-color was set to black with 10% opacity
However, in Bootstrap 5:
- 1 px height is used.
- The background color is set to
currentColorwith 25% opacity.
The result is:
- Inconsistent width, even on the same page if display scaling isn't a multiple of 100% (eg 125%, 150%, 250%) on Windows
- The rulers flickers when resizing the window on Firefox under these conditions
- Darker ruler color, which change depending on current color
Operating system: Windows Browser: Mozilla Firefox 89.0.1, Microsoft Edge 91.0.864.59, Google Chrome 91.0.4472.77 test case