Re: [csswg-drafts] [css-pseudo-4] Standardizing input[type="range"] styling (#4410)

# Problem 4: `thumb` and `track` vertical alignment

This issue is one that it's been easy to get around, but it's a very common and annoying one, arising in WebKit browsers every single time we set the `height` of `border-box` of the `thumb` to be different from that of the `content-box` of the `track`.

This happens because in WebKit browsers, after setting `-webkit-appearance: none` the default `height` of the `content-box` of the `track` is given by that of the `border-box` of the `thumb`. So when both the `track` and the `thumb` have a `height` that's explicitly set and these heights don't match, they are top-aligned, not middle aligned, which is what almost every design I've implemented asked for.

Fortunately, it been easy to fix so far with a `margin-top` only set on `::-webkit-slider-thumb` (but not on `::-moz-range-thumb` as well, since the `track` and `thumb` are middle aligned by default in Firefox).

-- 
GitHub Notification of comment by thebabydino
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4410#issuecomment-1088848658 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 5 April 2022 15:14:48 UTC