Description Samuel Mannehed 2023-05-04 16:25:13 CEST

Created attachment 1123 [details]
Screenshot of the problem (note the label for the service-restart checkbox)

Radio buttons, checkboxes and toggle switches are in most cases well aligned with their respective labels (as of bug 7909). However, some rendering issues remain in some cases.

In Chrome, Firefox, and Edge we sometimes get rounding errors in the rendering because the element's coordinates aren't integers internally. When rendering, browsers are bound to draw on integer screen coordinates (on regular DPI).

The method we use to nudge the element's vertical-align down from the baseline, results in an offset of ~2.75px with our default font-size (15px). Currently, the offset is calculated like this (--checkradio-height is 16px, and 0.698em is the height of a capital letter X):

> vertical-align: calc(0px - (var(--checkradio-height) - 0.698em) / 2);
This offset is the difference in position between the radio/checkbox/toggle element and its label. Depending on the general positioning of these two elements, we might end up with coordinates rounded differently for the element and the label, respectively. When rendered, if one is rounded up and the other rounded down, we see the issue.

We want the offset to be dependent on the font-size, and unfortunately, Chromium-based browsers don't have any “round()” function available in CSS yet:

https://developer.mozilla.org/en-US/docs/Web/CSS/round

Note that rendering must work differently in WebKit somehow, since we don't see the same issue in Epiphany and Safari.