From 7fc7724e85a617574a6ee967530f0d8709c93e59 Mon Sep 17 00:00:00 2001 From: Sebastian Keller Date: Sun, 23 Feb 2025 12:15:52 +0100 Subject: [PATCH] slider: Align handle size with with pixel grid Since the handle radius is used to calculate the width and height of the slider, having the calculated size be a non-integer value can cause the following widgets in a box-like container to be unaligned with the pixel grid, which can lead to blurriness or other visual issues. This for example could be observed with the interface font set to "Cantarell 12", which results in a handle radius of 8.278. In quick settings when showing two consecutive sliders, the second slider then gets rendered at a non-integer vertical offset. Further having a non-integer size for a StDrawingArea can cause the texture to get slightly squished or stretched as the size of the cairo surface is rounded to the nearest pixel, but rendered using the unrounded actor size. This commit changes the border radius rather than ceiling the preferred width/height so that the handle size always matches the width or height of the widget and there are no visual gaps caused by a partially filled pixel. Part-of: --- js/ui/slider.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/ui/slider.js b/js/ui/slider.js index 4f34f5faf..3a2cdbd8f 100644 --- a/js/ui/slider.js +++ b/js/ui/slider.js @@ -36,7 +36,8 @@ export const Slider = GObject.registerClass({ super.vfunc_style_changed(); const themeNode = this.get_theme_node(); - this._handleRadius = themeNode.get_length('-slider-handle-radius'); + this._handleRadius = + Math.round(2 * themeNode.get_length('-slider-handle-radius')) / 2; } vfunc_repaint() {