While working on a multi-format editable date/time widget, I happened to notice that the divider line in one of the widgets appeared thicker when compared to others (particularly thicker in the one with the red text):
https://i.sstatic.net/BVNiT.png
Here's the CSS snippet responsible for this:
.tbw-dse-divider {
align-self: stretch;
background-color: #A6A6A6;
margin: 0 max(1px, 0.0836em);
overflow: hidden;
position: relative;
white-space: nowrap;
width: max(1px, 0.0836em);
}
By adjusting the CSS and shifting the divider half a pixel with left: 0.5px, the affected divider becomes thinner while the rest become thicker:
https://i.sstatic.net/sIOEK.png
The web console indicates that this particular line is rendered at a width of 2.5 pixels. It seems like some kind of rounding error where I sometimes get 2 pixels and sometimes get 3 pixels.
This issue does not occur in Firefox or Safari, where the appearance of the divider remains consistent. The screenshots were taken from a high-resolution screen, so rendering half a pixel should be achievable without any issues.
Does anyone have a solution to address this Chrome width-rounding problem?
Comparison of the divider as rendered by Firefox: